CSS 浮动（float）详解

看了很多大牛总结的float特性，现在进行简单的整理和总结。

1.浮动的特性：

①浮动没有脱离标准文档流，但脱离了文档流。

注：此处的标准文档流=文本流+文档流，文本流相对于文字段落来讲，文档流相对于盒子模型来讲。也就是说浮动元素会脱离文档流导致浮动后面的元素会无视浮动元素，但文本流不会无视浮动元素，会围绕着浮动元素周围，类似于文字四周环绕的效果。

参考文章：关于float是否脱离标准文档流详细解析

②浮动能带来灵活的布局，但同时也带来了父元素高度塌陷的缺点（即浮动元素高度不影响其父级元素的高度，也就是说，其父级元素高度小于浮动元素，整块的高度依旧是按照父级元素来的，浮动元素高度撑不起父级元素），所以清除浮动是十分必要的。

2.清除浮动的方法（即解决浮动的父级元素高度塌陷的问题）

 

解决浮动引起的高度塌陷，分别是：

①   使用clear:both，常见的clearfix：（优点避免了改变html结构，直接用css解决）

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}

.clearfix{*+height:1%;}

用法：在浮动元素的父元素上添加class=”demo clearfix”。

优化方案：

.demo:after,.demo2:after{content:".";display:block;height:0;clear:both;visibility:hidden}

.demo,.demo2{*+height:1%;}

另一种浮动闭合的方式：

.clearfix{overflow:auto;_height:1%}

还有：

.clearfix{overflow:hidden;_zoom:1;}

参考文章：解读浮动闭合最佳方案：clearfix

②   触发浮动元素父元素的BFC（块状格式上下文，为解决盒子与盒子之间，内容不相互影响的概念）；

BFC:

float: left | right;

position: fixed | absolute

display: inline-block | table-cell | table-caption | flex | inline-flex;

overflow: hidden | scroll | auto;

注：table可以生成BFC，table会默认生成一个匿名的table-cell。

关于BFC的相关文章：学习BFC、BFC原理