高度塌陷，指的是當子元素有浮動並且父元素沒有高度的情況下，父元素會出現高度為零的情況。
我們定義乙個這樣的結構：外面有乙個大盒子，裡面有兩個小盒子。
此時，分別給裡面的左邊盒子左浮動，右邊盒子右浮動，由於父元素沒有高度，裡面盒子浮動後脫離了文件流，父元素便出現了「高度塌陷」。上面顯示的黑色線條是父元素的黑色邊框，如圖所示：
而我們怎樣才能解決「高度塌陷」，實現如下圖所示的正確顯示效果呢？
方法一：給父元素寫固定高度
弊端：高度固定則不能讓元素高度自適應了，不靈活 。
.box.box方法四：在浮動元素下方新增空div,並給該元素設定以下屬性：
.空div的類名方法五： 給父元素新增display：table；
弊端：會改變當前元素的元素型別；
.box在父元素中內容的最後新增乙個偽元素，具體設定樣式如下：
.box:aftercss解決高度塌陷的方法
2 overflow hidden 解決高度塌陷並能實現高度自適應的方法 遵循bfc的顯示原則 3 在浮動元素的下方新增乙個空元素，並且給他設定一下屬性 clear both height 0 overflow hidden 4 display table 給父元素新增display table 讓...
css之高度塌陷及其解決方法
普通流定位，又稱為文件流定位，是頁面元素的預設定位方式 頁面中的塊級元素 按照從上到下的方式逐個排列 頁面中的行內元素 按照從左到右的方式逐個排列 但是如何讓多個塊級元素在一行內顯示?這裡就引出了浮動定位 float屬性 取值為 left right 脫離文件流 元素會相對於它原來的位置偏移某個距離...
高度塌陷解決方法
如果父元素只包含浮動元素，且父元素未設定高度和寬度，那麼它的高度就會塌縮為零，也就是所謂的 高度塌陷 如果父級元素包含背景或者邊框，那麼溢位的元素就不像父級元素的一部分了。解決 高度塌陷 問題的方法 1.浮動父級元素，父級元素的高度就會擴大，直到完全包含它裡面的浮動元素。如果使用這種方法，一定要在該...