HTML 文檔流設(shè)置元素浮動導(dǎo)致父元素高度無法自適應(yīng)的解決方法

1、html 文檔流，設(shè)置元素浮動，導(dǎo)致父元素高度無法自適應(yīng)的解決方法元素浮動定義float 屬性定義元素在哪個方向浮動。以往這個屬性總應(yīng)用于圖像，使文本圍繞在圖像周圍，不過在 css 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。假如浮動非替換元素，則要指定一個明確的寬度；否則，它們會盡可能地窄。注釋：如果在一行之上惟獨(dú)極少的空間可供浮動元素，那么這個元素會跳至下一行，這個過程會持續(xù)到某一行擁有足夠的空間為止。why 子元素浮動 會導(dǎo)致父元素 高度塌陷？這是由于內(nèi)部的元素設(shè)置float:left | right后，就走失了clear:both和display:bloc

2、k（持疑惑態(tài)度）的樣式，所以外部的父容器不會被撐開。舉個 ：子元素未設(shè)置浮動，父元素自動被撐開.father width: 400px;border: 1px solid blue;.son width: 200px;height: 200px;border: 1px solid red;background-color: yellow;子元素設(shè)置浮動，父元素高度塌陷.father width: 400px;border: 1px solid blue;.son width: 200px;height: 200px;border: 1px solid red;background-color:

3、 yellow;float: left;閉合浮動的常見解決計(jì)劃終于，我們要的效果是要跟沒設(shè)置浮動之前的效果一樣，讓父元素高度自適應(yīng)：在浮動元素之后添加清除浮動的子元素：.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;父元素設(shè)置 overflow: hidden.father width

4、: 400px;border: 1px solid blue;overflow: hidden;.son width: 200px;height: 200px;border: 1px solid red;background-color: yellow;float: left;是不是很奇特！由于子元素的浮動，會導(dǎo)致父元素誤認(rèn)為content高度為0（即藍(lán)色邊框?yàn)橐粭l線），所以父元素設(shè)成overflow:hidden溢出躲藏的話，直覺上應(yīng)當(dāng)子元素因?yàn)橐绯鰧?dǎo)致不顯示才對。但真切效果是：父元素設(shè)成overflow:hidden溢出躲藏后，父元素高度竟然自適應(yīng)了！這是怎么回事呢？是由于 bfc（block formatting context），感愛好的童鞋，點(diǎn)擊鏈接了解一下哈.用 :after 偽元素，思路是用:after元素在div后面插入一個躲藏文本.，躲藏文本用clear來實(shí)現(xiàn)閉合浮動.father:after clear: both;content: "." /隨意文本如dfgdfgdispl