淺談CSS中浮動(dòng)float帶來(lái)的高度塌陷問(wèn)題及4種解決方案

2022-05-11 14:51:14 來(lái)源：互聯(lián)網(wǎng)作者：佚名人氣：次閱讀 0 條評(píng)論

淺談CSS中浮動(dòng)float帶來(lái)的高度塌陷問(wèn)題及4種解決方案在文檔流中，父元素的高度默認(rèn)是被子元素?fù)伍_的，也就是子元素多高，父元素就多高。但是當(dāng)為子元素設(shè)置浮動(dòng)以后，子元素會(huì)完全脫離文檔流，此時(shí)將會(huì)導(dǎo)致子元素?zé)o法撐起父元素的高度，導(dǎo)致父元素的高度塌陷。...

一：高度塌陷問(wèn)題

　　在文檔流中，父元素的高度默認(rèn)是被子元素?fù)伍_的，也就是子元素多高，父元素就多高。但是當(dāng)為子元素設(shè)置浮動(dòng)以后，子元素會(huì)完全脫離文檔流，此時(shí)將會(huì)導(dǎo)致子元素?zé)o法撐起父元素的高度，導(dǎo)致父元素的高度塌陷。

　　由于父元素的高度塌陷了，則父元素下的所有元素都會(huì)向上移動(dòng)，這樣將會(huì)導(dǎo)致頁(yè)面布局混亂。

　　所以在開發(fā)中一定要避免出現(xiàn)高度塌陷的問(wèn)題, 二：4種高度塌陷解決方案

解決方案一

　　將父元素的高度寫死，最簡(jiǎn)單的避免塌陷問(wèn)題的出現(xiàn)，

　　但是一旦高度寫死，父元素的高度將不能自動(dòng)適應(yīng)子元素的高度，所以這種方案是不推薦使用的。

解決方案二：

　　開啟bfc屬性

　　頁(yè)面元素中的隱含屬性：block formatting context 即塊格式化上下文，簡(jiǎn)稱bfc，當(dāng)開啟元素的bfc以后，元素會(huì)變成一個(gè)獨(dú)立的布局區(qū)域，不會(huì)在布局上影響到外面的元素，bfc 理解為一個(gè)封閉的大箱子，箱子內(nèi)部的元素不會(huì)影響到外部。

　　開啟bfc后，元素將會(huì)具有如下的特性：

　　1.父元素的垂直外邊距不會(huì)和子元素重疊

　　2.開啟bfc的元素不會(huì)被浮動(dòng)元素所覆蓋

　　3.開啟bfc的元素可以包含浮動(dòng)的子元素(可解決高度塌陷)

如何開啟元素的bfc

　　1.設(shè)置元素浮動(dòng)(不推薦) 使用這種方式開啟，雖然可以撐開父元素，但是會(huì)導(dǎo)致父元素的寬度丟失，而且使用這種方式也會(huì)導(dǎo)致下邊的元素上移，不能解決問(wèn)題

　　2.設(shè)置元素為inline-block(不推薦) 可以解決問(wèn)題，但是會(huì)導(dǎo)致寬度丟失，不推薦使用這種方式

　　3.將元素的overflow設(shè)置為一個(gè)非visible的值

　　4.設(shè)置元素絕對(duì)定位推薦方式：將overflow設(shè)置為hidden是副作用最小的開啟bfc的方式。

解決方案三：

利用clear屬性

　　clear可以用來(lái)清除其他浮動(dòng)元素對(duì)當(dāng)前元素的影響

　　可選值： none，默認(rèn)值，不清除浮動(dòng) left，清除左側(cè)浮動(dòng)元素對(duì)當(dāng)前元素的影響 right，清除右側(cè)浮動(dòng)元素對(duì)當(dāng)前元素的影響 both，清除兩側(cè)浮動(dòng)元素對(duì)當(dāng)前元素的影響，清除對(duì)他影響最大的那個(gè)元素的浮動(dòng)

　　了解完clear屬性后，我們可以直接在高度塌陷的父元素的最后，添加一個(gè)空白的div，由于這個(gè)div并沒(méi)有浮動(dòng)，所以他是可以撐開父元素的高度的，然后在對(duì)其進(jìn)行清除浮動(dòng)，這樣可以通過(guò)這個(gè)空白的div來(lái)?yè)伍_父元素的高度，基本沒(méi)有副作用

　　當(dāng)然使用這種方式雖然可以解決問(wèn)題，但是會(huì)在頁(yè)面中添加多余的結(jié)構(gòu)。

解決方案四：

　　通過(guò)after偽類向元素的最后添加一個(gè)空白的塊元素，然后對(duì)其清除浮動(dòng)，這樣做和添加一個(gè)div的原理一樣，可以達(dá)到一個(gè)相同的效果，而且不會(huì)在頁(yè)面中添加多余的div，這是我們最推薦使用的方式，幾乎沒(méi)有副作用.

.box1:after{undefined
/*添加一個(gè)內(nèi)容*/
content: "";
/*轉(zhuǎn)換為一個(gè)塊元素*/
display: block;
/*清除兩側(cè)的浮動(dòng)*/
clear: both;
}

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">       
            .box1{
                border: 1px solid red;
                background-color: palegreen;
                 
            }
             
            .box2{
                width: 100px;
                height: 100px;
                background-color: blue; 
                /* margin-top:100px ; */
                /* float: left; */
            }
             
            .box1:after{
                /*添加一個(gè)內(nèi)容*/
                content: "";
                /*轉(zhuǎn)換為一個(gè)塊元素*/
                display: block;
                /*清除兩側(cè)的浮動(dòng)*/
                clear: both;
            }
             
        </style>
    </head>
    <body>
        <div class="box1">
            <div class="box2"></div>
        </div>
    </body>
</html>

　　到此這篇關(guān)于淺談css中浮動(dòng)float帶來(lái)的高度塌陷問(wèn)題及4種解決方案的文章就介紹到這了