一、浮动

1、浮动的元素会脱标，漂浮在标准文档流之上。
2、只能向左或向右浮动。
3、不管是块级元素还是行内元素，一旦设置了float属性，则自动转变为行内块模式。
4、浮动会导致高度坍塌，影响后面元素布局。

---

二、浮动应用

1、最初设计是为了实现文字环绕排版
2、布局，自适应多列布局

---

三、清除浮动

就是清除浮动高度坍塌的影响

有很多方式：
1、直接后面加清除浮动的标签

<div class="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box" style="clear:both;"></div>
</div>

2、clearfix 最佳实践

// 全浏览器通用的clearfix方案【推荐】
// 引入了zoom以支持IE6/7
// 同时加入:before以解决现代浏览器上边距折叠的问题
.clearfix:before,
.clearfix:after {
    display: table;
    content: " ";
}
.clearfix:after {
    clear: both;
}
.clearfix{
    *zoom: 1;
}

3、BFC清除浮动

float 为 left | right
overflow 为 hidden | auto | scroll
display 为 table-cell | table-caption | inline-block | flex | inline-flex
position 为 absolute | fixed

---