元素浮動定義

float 屬性定義元素在哪個方向浮動。以往這個屬性總應用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。

如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會盡可能地窄。

注釋：假如在一行之上只有極少的空間可供浮動元素，那么這個元素會跳至下一行，這個過程會持續(xù)到某一行擁有足夠的空間為止。

why 子元素浮動 會導致父元素 高度塌陷？

這是因為內部的元素設置float:left || right后，就丟失了clear:both和display:block(持懷疑態(tài)度)的樣式，所以外部的父容器不會被撐開。

舉個?：

子元素未設置浮動，父元素自動被撐開

.father {

width: 400px;

border: 1px solid blue;

}

.son {

width: 200px;

height: 200px;

border: 1px solid red;

background-color: yellow;

}

子元素設置浮動，父元素高度塌陷

.father {

width: 400px;

border: 1px solid blue;

}

.son {

width: 200px;

height: 200px;

border: 1px solid red;

background-color: yellow;

float: left;

}

閉合浮動的常見解決方案

最終，我們要的效果是要跟沒設置浮動之前的效果一樣，讓父元素高度自適應：

在浮動元素之后添加清除浮動的子元素：

.father {

width: 400px;

border: 1px solid blue;

}

.son {

width: 200px;

height: 200px;

border: 1px solid red;

background-color: yellow;

float: left;

}

.clearFloat {

width: 100%;

height: 0;

clear: both;

}

父元素設置 overflow: hidden

.father {

width: 400px;

border: 1px solid blue;

overflow: hidden;

}

.son {

width: 200px;

height: 200px;

border: 1px solid red;

background-color: yellow;

float: left;

}

是不是很神奇！因為子元素的浮動，會導致父元素誤認為content高度為0(即藍色邊框為一條線)，所以父元素設成overflow:hidden溢出隱藏的話，直覺上應該子元素由于溢出導致不顯示才對。但真實效果是：父元素設成overflow:hidden溢出隱藏后，父元素高度居然自適應了！這是怎么回事呢？是因為 BFC(Block Formatting Context)，感興趣的童鞋，點擊鏈接了解一下哈...

用 :after 偽元素，思路是用:after元素在div后面插入一個隱藏文本”.”，隱藏文本用clear來實現(xiàn)閉合浮動

.father:after {

clear: both;

content: "."; //任意文本如“dfgdfg”

display: block;

height: 0; //高度為0且hidden讓該文本徹底隱藏

visibility: hidden;

}

總結

以上是生活随笔為你收集整理的HTML浮动导致高度塌陷,HTML 文档流，设置元素浮动，导致父元素高度无法自适应的解决方法（高度欺骗）...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。