浮動(dòng)
浮動(dòng)元素會(huì)脫離文檔流并向左/向右浮動(dòng)筋蓖，直到碰到父元素或者另一個(gè)浮動(dòng)元素薪介。
被浮動(dòng)的元素可以內(nèi)聯(lián)排列。
浮動(dòng)元素脫離了文檔流敞掘，并不占據(jù)文檔流的位置叽掘，自然父元素也就不能被撐開，所以沒了高度玖雁。
清除浮動(dòng)
主要有兩種方式：分別是clear清除浮動(dòng)和BFC清除浮動(dòng)
1. clear清除浮動(dòng)
clear:both 不允許元素的左邊或右邊挨著浮動(dòng)元素更扁，底層原理是在被清除浮動(dòng)的元素上邊或者下邊添加足夠的清除空間。
2. 利用偽元素清除浮動(dòng)（現(xiàn)代瀏覽器clearfix方案赫冬，最佳實(shí)踐方案）
// clearfix方案浓镜，不支持IE6/7
.clearfix:after {
display: table;
content: " ";
clear: both;
}
// 引入了zoom以支持IE6/7
.clearfix:after {
display: table;
content: " ";
clear: both;
}
.clearfix{
*zoom: 1;
}
// 最佳實(shí)踐方案
// 加入:before以解決現(xiàn)代瀏覽器上邊距折疊的問題
.clearfix:before,
.clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
.clearfix{
*zoom: 1;
}
注： 加入:before是為了解決現(xiàn)代瀏覽器上邊距折疊的問題
3. BFC容器清除浮動(dòng)
BFC(Block Formatting Context)既塊狀格式化上下文，它是按照塊級(jí)盒子布局的劲厌。
BFC的主要特征：
- BFC容器是一個(gè)隔離的容器膛薛，和其他元素互不干擾；所以我們可以用觸發(fā)兩個(gè)元素的BFC來解決垂直邊距折疊問題补鼻。
- BFC可以包含浮動(dòng)哄啄；通常用來解決浮動(dòng)父元素高度坍塌的問題雅任。
BFC的觸發(fā)方式
// 給父元素添加以下屬性來觸發(fā)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
