浮动
浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。
被浮动的元素可以内联排列。
浮动元素脱离了文档流，并不占据文档流的位置，自然父元素也就不能被撑开，所以没了高度。
清除浮动
主要有两种方式：分别是clear清除浮动和BFC清除浮动
1. clear清除浮动
clear:both 不允许元素的左边或右边挨着浮动元素，底层原理是在被清除浮动的元素上边或者下边添加足够的清除空间。
2. 利用伪元素清除浮动（现代浏览器clearfix方案，最佳实践方案）
// clearfix方案，不支持IE6/7
.clearfix:after {
display: table;
content: " ";
clear: both;
}
// 引入了zoom以支持IE6/7
.clearfix:after {
display: table;
content: " ";
clear: both;
}
.clearfix{
*zoom: 1;
}
// 最佳实践方案
// 加入:before以解决现代浏览器上边距折叠的问题
.clearfix:before,
.clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
.clearfix{
*zoom: 1;
}
注： 加入:before是为了解决现代浏览器上边距折叠的问题
3. BFC容器清除浮动
BFC(Block Formatting Context)既块状格式化上下文，它是按照块级盒子布局的。
BFC的主要特征：
- BFC容器是一个隔离的容器，和其他元素互不干扰；所以我们可以用触发两个元素的BFC来解决垂直边距折叠问题。
- BFC可以包含浮动；通常用来解决浮动父元素高度坍塌的问题。
BFC的触发方式
// 给父元素添加以下属性来触发BFC
1. float: left | right
2. overflow: hidden | auto | scorll
3. display: table-cell | table-caption | inline-block | flex | inline-flex
4. position: absolute | fixed
