float属性

float的属性值有none、left、right，有几个要点：

1、只有横向浮动，并没有纵向浮动。
当元素应用了float属性后，将会脱离普通流，元素脱离【普通文本流】，且不占位置（普通文本流详见：CSS position:static\left\right\fixed使用_小新空荡荡的博客-CSDN博客_position 设置left），和position:absolute类似，浮动元素之后的元素相当于没有它一样排版。

例如:span1占了位置

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title><style type="text/css">#span1 {background-color: sandybrown;float: left;}</style>
</head><body><span id="span2">span2
</span><span id="span1">span1
</span>
</body></html>

2、浮动元素的后一个元素会围绕着浮动元素（典型运用是文字围绕图片）

float：left图片别文字环绕图1

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title><style type="text/css">img {width: 50px;height: 50px;float: left;}</style></head><body><img src="resource/baidu.jpg">百度是拥有强大互联网基础的领先AI公司。百度愿景是：成为最懂用户，并能帮助人们成长的全球顶级高科技公司。 [1]“百度”二字，来自于八百年前南宋词人辛弃疾的一句词：众里寻他千百度。这句话描述了词人对理想的执着追求。1999年底，身在美国硅谷的李彦宏看到了中国互联网及中文搜索引擎服务的巨大发展潜力，抱着技术改变世界的梦想，他毅然辞掉硅谷的高薪工作，携搜索引擎专利技术，于2000年1月1日在中关村创建了百度公司。1999年底，身在美国硅谷的李彦宏看到了中国互联网及中文搜索引擎服务的巨大发展潜力，抱着技术改变世界的梦想，他毅然辞掉硅谷的高薪工作，携搜索引擎专利技术，于2000年1月1日在中关村创建了百度公司。</body>
</html>

3、设置浮动，元素的前一个元素不会受到任何影响

例如：让两个块状元素并排显示，必须让两个块状元素都应用float

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title><style type="text/css">#left {/* 宽度为屏幕的30% */width: 30%;height: 100px;background-color: aqua;float: left;}#right {width: 30%;height: 100px;background-color: red;float: left;}</style></head><body><div id="left">left</div><div id="right">right</div></body>
</html>

float:left从左开始浮动，right从右开始浮动，如上图设置的float:left，如何改成float:right结果如下：

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title><style type="text/css">#left {/* 宽度为屏幕的30% */width: 30%;height: 100px;background-color: aqua;float: right;}#right {width: 30%;height: 100px;background-color: red;float: right;}</style></head><body><div id="left">left</div><div id="right">right</div></body>
</html>

clear属性配合float使用

1. clear: none -- 允许浮动元素 (默认值) 。
2. clear: left -- 在左侧不允许浮动元素。
clear:left 的含义是如果当前元素的左侧有浮动元素，那么就强制该元素另起一行。

3. clear: right -- 在右侧不允许浮动元素。
clear:right 的含义是如果当前元素的右侧有浮动元素，那么就强制该元素另起一行。

4. clear: both -- 在左右侧均不允许浮动元素。

注意：设置 clear 属性时, 只对当前浮动元素生效, 对于其他的元素标签没有效果，及换行与否是当前元素是否换行 。

例如: 页面中有两个 div , 同时设置 float: left, 当我们对第一个元素设置 clear: right时(如果右侧有浮动元素，那么就强制该元素另起一行，因为此元素就是一行的第一个元素已经是新的一行了), 并不能使第二个元素排列在第二行。如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#left {width: 100px;height: 100px;background-color: blue;float: left;/* 右侧如果有浮动元素则另起一行，由于是第一个元素了不会另起一行了 */clear: right;}#right {width: 100px;height: 100px;background-color: red;float: left;}</style></head><body><div id="left">left</div><div id="right">right</div></body>
</html>

clear常用案例：页面布局，例如：做2x2布局。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#left {width: 100px;height: 100px;background-color: blue;float: left;}#right {width: 100px;height: 100px;background-color: red;float: left;}#content {width: 200px;height: 100px;background-color: bisque;/* 元素两侧如由浮动元素则另起一行 */clear: both;}</style></head><body><div id="left">left</div><div id="right">right</div><div id="content">content</div></body>
</html>

postion和float同时使用：

元素同时应用了position: relative、float、（top / left / bottom / right）属性后，则元素先浮动到相应的位置，然后再根据（top / left / bottom / right）所设置的距离来发生偏移。right浮动定位后，再发生的偏移。

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title><style type="text/css">#left {/* 宽度为屏幕的30% */width: 30%;height: 100px;background-color: aqua;float: left;}#right {width: 30%;height: 100px;background-color: red;/* float position:同时使用先float后postion */float: left;position: absolute;/* 具体body left 50px;压住了left的内容 */left: 50px;}</style></head><body><div id="left">left</div><div id="right">right</div></body>
</html>

CSS float：none right left的使用相关推荐

CSS Float(浮动)
2019独角兽企业重金招聘Python工程师标准>>> 什么是CSS Float(浮动)? CSS的Float(浮动),元素可以围绕其他元素向左或向右被推动 Float(浮动),往往 ...
css float left right 中间空间城数据无法显示
css float left right 中间空间城数据无法显示是由于设定了width具体值太小造成,简单用%值或不设置. 转载于:https://www.cnblogs.com/allensun- ...
对css float 浮动的学习心得
css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...
教你玩转CSS Float（浮动）
目录什么是 CSS Float(浮动)? 元素怎样浮动彼此相邻的浮动元素清除浮动 - 使用 clear CSS 中所有的浮动属性什么是 CSS Float(浮动)? CSS 的 Float(浮 ...
html中左浮动怎么写,div css float浮动用法(left right)
div+css中float认识及css float用法,DIV CSS float浮动知识用法与float浮动教程篇 Css样式的float浮动属性,用于设置标签对象(如: 标签盒子.标签.标签.标签 ...
html图片浮动教程,CSS Float（浮动）
CSS Float(浮动) 什么是 CSS Float(浮动)? CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. Float(浮动),往往是用于图像,但它在布局时一 ...
php浮动边框设置属性,CSS float 浮动属性
本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...
多列网页布局CSS float 属性和 CSS Clear 属性
CSS float 属性 CSS float 属性用于设计多列网页布局.如果你想设计两列或三列的网页布局,你必须在float 属性的帮助下浮动你的 div 元素. div 标签是块级元素,因此,div ...
html float属性6,CSS float 浮动属性
本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...
CSS Float布局过程
使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...

CSS float：none right left的使用

float属性

clear属性配合float使用

CSS float：none right left的使用相关推荐

最新文章

热门文章