float浮动属性
定义和用法
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
可能的值
Float的特性
-
应用于文字围绕图片
-
创建一个块级框
-
多列浮动布局
-
浮动元素的宽度、高度自适应，但可以设置其值。
非核心且主要应用领域
分栏布局：让区块先水平排列，然后超出部分另起一行。
主要特点
1.父级高度塌陷（这也是一个严重的问题）
2.宽、高变成自适应子元素，但宽、高的设置有效
解决方法
1、给父元素也添加float。这样让父元素与子元素一起脱离文档流浮动起来，保证子元素在父元素内，这样父元素就能自适应子元素的高度，但是此方法有一弊端，一定会影响父元素之后的元素排列，甚至影响布局。
2、给父元素一个固定高度，此方法适用于子元素高度已知并且固定的情况。
3、添加一个块级元素，并给此元素设置clear:both;清除浮动。在很早之前用的就是这种解决办法，新建一个空的div，为这个div设置clear：both；这样无疑是增加了无意义的标签，一个大型页面中，这种标签太多是不好的。
4、给父元素添加 overflow：hidden；【后有详解】
5、通过伪类::after清除浮动 【后有详解】
overflow:hidden;
隐藏溢出，当内容超过其父元素时，可以使用该属性和值将溢出的部分裁剪掉，使页面更加美观
清除浮动，当子元素浮动时，给父元素添加overflow：hidden，按照它的第一个特性，应该将子元素超出的部分截掉，但是因为子元素有浮动，无法裁剪，所有只能由父元素增加高度去包裹住子元素，使得父元素拥有了高度，而这个高度是跟随子元素自适应的高度，这样就把浮动的子元素包含在父元素内了。
::after 伪类
利用伪类来清楚浮动，其效果跟创建一个空的div并设置其为clear：both；是一样的，只不过这里用伪类代替了空的div元素
清除浮动的多种方法
1.为父元素添加overflow：hidden
这种方法是先找到浮动元素的父元素，再在父元素中添加属性overflow:hidden,清除找到的父元素中的子元素浮动对页面的影响。一般不使用这种方式，因为overflow:hidden属性的特点是，离开了这个属性的区域会被隐藏，就是超出的部分会被隐藏。
2.浮动父元素
这种方式也不推荐，了解即可。
3.使用clear:both清除浮动，在所有浮动元素下方添加一个该属性，可以消除float的破坏性，但会增加不必要的标签。
这种方法也不是很常用，但需要理解
4.使用使用after伪对象清除浮动（推荐）
#layout{*zoom:1}
#layout:after{content:'\20';display:block;height:0;clear:both}
5、使用空标签清除浮动。空标签可以是div标签，也可以是P
标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签
清除浮动，并为其定义CSS代码：clear:both。此方法的弊端在于增加了无意义的结构元素。
对于使用额外标签清除浮动（闭合浮动元素），是W3C推荐的做法。至于使用
<br />元素还是空<div><div/>可以根据自己的喜好来选（当然你也可以使用其它块级元素）。不过要注意的是，<br />本身是有表现的，它会多出一个换行出
所以要设定它的heigh为0，以隐藏它的表现。所以大多数情况下使用空<div>比较合适。
<div class="clear"></div>
6、利用BFC环境清除浮动
BFC全称为 block formatting context，中文为“块级格式化上下文”
请大家记住下面这个表现规则：
如果一个元素具有BFC，内部的子元素在怎么翻江倒海，都不会影响外面的元素。
所有，BFC元素不可以发生margin重叠的，因为margin重叠是影响外面的元素的
BFC元素也可以用来清除浮动，因为如果不清楚，子元素浮动则父级浮动高度会塌陷，必然会影响后面元素布局和定位，这显然有违BFC元素的子元素不会影响外部元素的设定
那么什么情况下会触发BFC环境呢？常用的情况如下：
<html>根元素；- float值不为none；
- overflow的值为auto、scroll或hidden；
- display的值为table-cell、table-caption、inline-block中的任意一个；
- position的值不为relative和static。
换言之，只要元素符合上面任意一个条件，就无须使用clear:both属性去清除你的浮动带来的影响
824
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
