浮动float出现的本意是用来实现文字像流水一样环绕浮动元素的效果。因为除了这个效果以外，float属性的其他应用都可以用其他css属性来实现。
由于CSS是一门相当灵活的语言。某个CSS属性被用于的场景，可能会完全违背当初创造该CSS属性的本意。就如今天我们要讲的float，因为可以很简单的实现多列布局而常被当作布局属性使用。
浮动的特性：
包裹性：浮动属性可以使block元素产生类似inline-block的状态使其产生包裹内容的效果。
破坏性（欺骗性）：对行内盒inline-boxs设置浮动会破坏其所在行盒line-box的结构。
这个很好理解，因为浮动元素脱离了文档流，其父元素失去了内容，所以失去了高度。但浮动对其父元素line-box结构的影响不止于此。
可以理解为当元素浮动后，就如物体浮出湖面一样，不占距湖底空间，但是在湖底有个投影。而周围的内联元素就像胆小的鱼儿一样被影子欺骗，认为它就在哪里，所以不敢进去，只是围在一边。
浮动元素在脱离文档流的同时还会影响页面中的行内元素
浮动在文档流中的影响：
假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
如果把上面这段定义中的浮动元素换为inline-block元素，他同样成立，所以说在某些方面float元素和inline-block元素是相同的。
同为在一行排列，浮动元素就像时打了强化剂的inline-block，使他能设置排列的方向，但同时会有副作用，如上面讲到的破坏性。
我们一方面要使用他的布局能力，另一方面又不希望他副作用破坏布局，所以在使用float的时候，我们还会想办法清除浮动。
有哪些清除浮动的方法？
1、使用clear
clear : none | left | right | both
2、增加一个清除浮动的子元素
3、用:after伪元素
4、父元素设置 overflow:hidden
5、父元素也设成float
6、父元素设置display:table。
第一种方法只适合相邻浮动元素清除浮动，后面三种是触发了BFC，推荐使用第三种方法。
什么是BFC
BFC就是“块级格式化上下文”的意思，创建了 BFC的元素就是一个独立的盒子，不过只有Block-level box可以参与创建BFC， 它规定了内部的Block-level Box如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。
何为格式化上下文，个人理解就是将BFC容器进行格式化，使其不受上下元素的影响。
格式化具体指的是什么格式，可以参考html基本流，因为html本身就是一个BFC容器，大致特性如下：
内部的Box会在垂直方向，从顶部开始一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box叠加。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。 计算BFC的高度时，浮动元素也参与计算。
参考文献：
网友评论