HTML 文檔流，設置元素浮動，致使父元素高度沒法自適應的解決方法（高度欺騙）

時間 2019-11-10

標籤 html 文檔設置元素浮動致使高度沒法自適應解決方法欺騙欄目 HTML 简体版

原文原文鏈接

元素浮動定義

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

若是浮動非替換元素，則要指定一個明確的寬度；不然，它們會盡量地窄。spa

註釋：假如在一行之上只有極少的空間可供浮動元素，那麼這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間爲止。ssr

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

這是由於內部的元素設置float:left || right後，就丟失了clear:both和display:block（持懷疑態度）的樣式，因此外部的父容器不會被撐開。code

舉個🌰：

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

<body>
        <div class="father">
            <div class="son"></div>
        </div>
    </body>

<style>
    .father {
        width: 400px;
        border: 1px solid blue;
    }
    .son {
        width: 200px;
        height: 200px;
        border: 1px solid red;
        background-color: yellow;
    }
</style>

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

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

<style>
    .father {
        width: 400px;
        border: 1px solid blue;
    }
    .son {
        width: 200px;
        height: 200px;
        border: 1px solid red;
        background-color: yellow;
        float: left;
    }
</style>

閉合浮動的常看法決方案

最終，咱們要的效果是要跟沒設置浮動以前的效果同樣，讓父元素高度自適應：orm

在浮動元素以後添加清除浮動的子元素：

<div class="father">
    <div class="son"></div>
    <div class="clearFloat"></div>
</div>

<style>
.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;
}
</style>

父元素設置 overflow: hidden

<div class="father">
    <div class="son"></div>
</div>

<style>
.father {
    width: 400px;
    border: 1px solid blue;
    overflow: hidden;
}
.son {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    background-color: yellow;
    float: left;
}
</style>

是否是很神奇！由於子元素的浮動，會致使父元素誤認爲content高度爲0（即藍色邊框爲一條線），因此父元素設成overflow:hidden溢出隱藏的話，直覺上應該子元素因爲溢出致使不顯示纔對。但真實效果是：父元素設成overflow:hidden溢出隱藏後，父元素高度竟然自適應了！這是怎麼回事呢？是由於 BFC（Block Formatting Context），感興趣的童鞋，點擊連接瞭解一下哈...blog

用 :after 僞元素，思路是用:after元素在div後面插入一個隱藏文本」.」，隱藏文本用clear來實現閉合浮動

.father:after {
    clear: both;
    content: ".";   //任意文本如「dfgdfg」
    display: block;
    height: 0;      //高度爲0且hidden讓該文本完全隱藏
    visibility: hidden;
}