標准流:盒子會各占整行位置。子盒子若是標准流,父盒子雖然沒有高度,但是會撐開父盒子高度。
浮動:盒子浮了起來,不會占據原來的位置,若父盒子沒有定義高度,則不會撐開父盒子,父盒 子高度為0。(浮動可以讓多個塊級元素在一行顯示,且塊與塊之間沒有空隙,但要注意給父盒子清除浮動,否則父盒子不會被撐開)。
為什么要清除浮動呢?清除浮動的本質是什么?
清除浮動主要是為了解決父級元素因為子級浮動引起的內部高度為0的問題。
清除浮動的方法:
1. 額外標簽法:給誰清除浮動,就在其后額外添加一個空白標簽 。
優點:通俗易懂,書寫方便。(不推薦使用)
缺點:添加許多無意義的標簽,結構化比較差。
給元素small清除浮動(在small后添加一個空白標簽clear(類名可以隨意),設置clear:both;即可)
2. 父級添加overflow方法:可以通過觸發BFC的方式,實現清楚浮動效果。
優點:代碼簡潔(慎重使用,若該父盒子里還有position定位會引起麻煩)
缺點:內容增多時候容易造成不會自動換行導致內容被隱藏掉,無法顯示需要溢出的元素。
注意:別加錯位置,是給父親加(並不是所有的浮動都需要清除,誰影響布局,才清除誰。)
3. 使用after偽元素清除浮動::after方式為空元素的升級版,好處是不用單獨加標簽了。(較常用)
優點:符合閉合浮動思想,結構語義化正確
缺點:由於IE6-7不支持:after,使用zoom:1,觸發hasLayout。
注意:這個也是給父親添加 clearfix
4. 使用before和after雙偽元素清除浮動:(較常用)
注意:是給父親添加clearfix