1. 程式人生 > >你有可能不知道的css浮動問題

你有可能不知道的css浮動問題

css浮動 image 偽類 float blog 這樣的 fire text 但是

最近在開發過程中,有的時候會經常遇見明明知道需要這樣做,但是為什麽要這樣做的原因我們卻總是不明所以然。

先來解釋下什麽叫做清除浮動吧:

在非IE瀏覽器(如Firefox)下,當容器的高度為auto,且容器的內容中有浮動(float為left或right)的元素,在這種情況下,容器的高度不能自動伸長以適應內容的高度,使得內容溢出到容器外面而影響(甚至破壞)布局的現象。這個現象叫浮動溢出,為了防止這個現象的出現而進行的CSS處理,就叫CSS清除浮動。

如上定義,當容器的高度為auto的時候,我們使用float為(right || left)的時候。會出現父級元素不能撐開的結果。如圖

技術分享

圖上為沒有使用浮動的效果,當我們對item添加浮動樣式(float:left)之後

技術分享

就會產生這樣的效果,使得li的父級元素的高度為0。

所以我在使用浮動的時候,一般會給父級的元素加上一個固定的高度,或者使用after的偽類的方式給元素的浮動效果。

當然,清除浮動的辦法很多,自己隨意就好,畢竟總會找到適合你的那一款。

你有可能不知道的css浮動問題