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

標籤：ref   效果   布局   方式   解釋   log   es2017   img   text   

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

先來解釋下什麼叫做清除浮動吧：

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

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

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

 

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

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

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

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