一、流式布局
1.
標準流
2.浮動的元素會不占據標準流的空間。但是會影響標準流中的文本的排版。
二、浮動
1.浮動的元素A排列位置，跟上一個元素（塊級）有關系。如果上一個元素有浮動，則A元素頂部會和上一個元素的頂部對齊；如果上一個元素是標準流，則A元素的頂部會和上一個元素的底部對齊。
2.浮動具有破壞性，元素浮動后，破壞來原來的正常流布局，造成內容塌陷。
浮動的子元素會造成父元素的高度塌陷.
3.第一種解決高度塌陷的方法就是使用overflow。
在父盒子上設置overflow： hidden；之后，父盒子具有的包裹性，就不會出現高度塌陷的問題了。
4.Overflow可以觸發元素的BFC，可以讓元素具有獨立的排版的空間和權限，在bfc內部所有的元素都依據父元素進行排版和布局，所有父元素具有了包裹性，這就是解決高度塌陷問題的原理。
比如：浮動也可以觸發bfc，再有：定位、overflow、display：table、table-cell...
5.
6.方法一：使用空標記清除浮動，隔墻放。增加標簽。
方法二：使用overflow屬性清除浮動。會誤傷。
方法三：使用after偽對象清除浮動。
方法四：使用before after偽對象清除浮動.
7.Clearfix的使用場景：
-父盒子要把所有的子盒子包裹住。
-父盒子是包裹正行的div元素，需要前后進行清除浮動。
運用before after來設置content為空,并且display:block或table.
clearfix設置為觸發BFC.
