浮动

浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素

 

浮动最初设计的目的是用来实现文字环绕效果， 后来才用于横向排版或者多列布局

 

float特性

1. 破坏性， float的元素会脱离文档流， 破坏了父标签的原本结构，使得父标签出现了坍塌现象
2. 包裹性， div设置了float之后，其宽度会自动调整为包裹住内容宽度，而不是撑满整个父容器
3. 会使inline元素“块”化
4. 清除空格，多个换行的img，在显示的时候，中间时候有一个空格的（换行被浏览器解析为空格）， 但在浮动后， 空格就会消失 （“清空格”这一特性的根本原因是由于float会导致节点脱离文档流结构。它都不属于文档流结构了，那么它身边的什么换行、空格就都和它没关系的，它就尽量的往一边去靠拢，能靠多近就靠多近，这就是清空格的本质）
5. 浮动后，其他元素会“环绕”在其周围

 

去除浮动特性， 避免父元素“坍塌”

1. 浮动父元素
2. 为父元素添加overflow: hidden;
3. clear:both，不是很常用，但是大家要知道。通过在所有浮动元素下方添加一个clear:both的元素，可以消除float的破坏性, 底层原理是在被清除浮动的元素上边或者下边添加足够的清除空间， （由于第三个元素是浮动元素，脱离了文档流，就算给第三个元素上下加了清除空间，也是没有任何意义的）
4. clearfix， 利用伪元素实现第三种效果， 在div后面增加了一个clear:both的元素，跟第三种方法是一个道理