[CSS]CSS浮動塌陷及解決辦法

時間 2019-12-06

標籤 css 浮動解決辦法欄目 CSS 简体版

原文原文鏈接

一. CSS浮動

先看一個例子html

<html !DOCTYPE>
    <head>
        <title>HTML2</title>
        <style>
            .div-outer {
                border: solid 2px #223344;
            }
            .div1 {
                width: 200px;
                height: 100px;
                border: solid 2px #667788;
            }
            .div2 {
                width: 200px;
                height: 100px;
                border: solid 2px #667788;
            }
            .div3 {
                width: 200px;
                height: 100px;
                border: solid 2px #667788;
            }
        </style>
    </head>
    <body>
        <div class="div-outer">
            <div class="div1">div1</div>
            <div class="div2">div2</div>
            <div class="div3">div3</div>
        </div>
    </body>
</html>

頁面如圖所示
性能

在div-outer內部的三個div默認每一個div會佔一行，因此三個div會成列顯示。spa

如今對div1設置float: left，頁面如圖所示
code

能夠看到div2和div3重合了。
對div1設置float: left屬性，div1脫離文檔流，可是仍佔據位置，div2和div3重合是由於div2位置不變，div3也在div2的位置。可是發現這樣理解是不對的，正確的理解是div2被div1擠到了如今div3的位置。
由於若是對div1設置float: right，頁面如圖所示
orm

因此若是對div1設置float: left時，div2會被div1擠到如今div3的位置。htm

二. CSS浮動塌陷

若是對div1，div2，div3都設置float: left，可是父元素div-outer沒有設置寬度和高度，頁面如圖所示
圖片

若是沒有設置父元素高度，父元素的高度默認是auto，會隨子元素的高度而改變，若是對div1，div2，div3都設置float: left，那麼此時父元素高度爲0，這就是浮動塌陷。文檔

三. 解決方法

1. 添加一個新的div

在div3下面添加一個寬度爲0，高度爲0，而且設置clear: both屬性的空div。it

.div4 {
    clear: both;
}

<div class="div4"></div>

頁面如圖所示
table

父元素的高度能夠顯示了。

2. 設置父元素屬性

對父元素設置屬性overflow: hidden或overflow: auto，

.div-outer {
    border: solid 2px #223344;
    overflow: hidden;
}

設置overflow: hidden的意思是，overflow規定當內容溢出元素框時發生的事情，

由於父元素沒有指定高度，默認是auto，因此須要計算父元素包含的內容的高度，這樣子元素浮動的高度就被計算進去，解決了浮動塌陷。

頁面如圖所示，

或者對父元素設置屬性display: table，

.div-outer {
    border: solid 2px #223344;
    display: table;

設置display: table的意思是，使父元素造成了BFC(Block Form Content)，
BFC有三個特性：

防止上下margin重疊
防止浮動元素重疊
防止浮動塌陷

overflow: hidden也造成了BFC，BFC會將子元素的浮動高度計算進去，解決浮動塌陷。

頁面如圖所示，

不一樣之處在於設置屬性overflow: hidden，父元素寬度會是100%，而設置屬性display: table，父元素的寬度會隨子元素變化，。

3. 內牆法

在父元素後面使用僞元素:after，

.div-outer:after{
    display: block;
    content: "";
    height: 0;
    clear: both;
}

這種方法的做用和第一種方法是相同的，只不過沒有在div3後面再添加一個空的div，由於添加div會影響性能。

display: block;
content: "";
height: 0;

這就相似添加了一個空的div，而後設置屬性clear: both。

總之，清除浮動塌陷就是對父元素設置屬性使其造成BFC（第二種方法），或者添加一個空的div（第一種方法和第三種方法）。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。