Appearance
浮动特性
- 文字环绕
- 让块级元素同行显示
- 让行内元素可以设置宽高
- 可以使用margin，但是不能使用
margin: 0 auto;来居中显示
浮动导致的问题
- 父元素塌陷
父元素计算高度的时候，不会将浮动元素的高度计算在内，浮动元素高度撑不起父元素而导致父元素高度塌陷。
- 影响其他元素布局
浮动元素后面的兄弟元素会受到浮动元素影响，比如文字环绕、后面兄弟元素布局位置错误。
清除浮动
- 在最后一个浮动元素之后新增一个元素，并设置css：
float: left;（如果是清除右浮动，则属性值为right，如果两边都有浮动，则为both）
在最后一个浮动元素之后新增一个元素不论是新增一个真实DOM元素还是新增一个伪元素，操作都比较麻烦，可以利用BFC的特性清除浮动
- 把浮动元素放到一个新的BFC中，实际操作就是给浮动元素套一层盒子，加上合适的CSS属性使得盒子开启BFC，在新的BFC中的浮动元素将不影响外部的元素，不会造成父盒子高度塌陷和影响其他元素布局