解決浮動元素父級塌陷問題

坍塌原因：

當父級元素沒有設定高度時，當子元素浮動後，子元素會脫離文件流，而父級元素的高度不會像在普通文件流中一樣被內容撐開，此時，它是不能被撐開的，會對後續的布局結構造成很多困擾。

解決方法：

"clear:both"

>
<
/div>

父元素滿足下列條件之一即可：

- 根元素

- float屬性不為none
- position不為static和relative
- overflow不為visible（**較常用，通常設定overflow : hidden來解決高度塌陷**）
- display為inline-block / table-cell / table-caption / flex / inline-flex

.clear

/*ie6,7不支援::after偽類，所以沒法用下面的**，這個神奇的zoom可以直接解決ie6,7的清除浮動問題*/
.clear:
:after

CSS子元素浮動導致父元素高度塌陷問題

根據w3c標準，在頁面中元素都有乙個隱含的屬性叫做 block formatting context，簡稱 bfc，該屬性可以設定開啟或者關閉，預設是關閉的。當開啟元素的bfc以後，元素會具有以下特性 1.父元素的垂直外邊距不會和子元素重疊 2.開啟 bfc 的元素不會被浮動元素覆蓋 3.開啟 bf...

浮動元素撐起父級元素

浮動會使元素脫離文件流，如果不設定父級高度，父級將失去高度，影響頁面布局。這裡總結了一些常用的方法，是父級 有高度 1.設定父級高度 設定乙個合適的高度，這種方法比較適用於元素高度固定的場景。2.設定父級元素 overflow hidden 這種方法比較簡單，但要確保父級元素沒有溢位樣式。3.設定父...

css的浮動與清理 父級塌陷

浮動 float 屬性有float left right clear 清理浮動 clear both 作用物件兩側不允許有浮動元素，如果有元素，物件就會自己換行 clear left 作用物件左側不允許有浮動元素，如果有元素，物件就會自己換行 clear right 作用物件右側不允許有浮動元素，如...