淺談CSS中浮動(dòng)float帶來(lái)的高度塌陷問(wèn)題及4種解決方案
我要評(píng)論一：高度塌陷問(wèn)題
在文檔流中，父元素的高度默認(rèn)是被子元素?fù)伍_(kāi)的，也就是子元素多高，父元素就多高。但是當(dāng)為子元素設(shè)置浮動(dòng)以后，子元素會(huì)完全脫離文檔流，此時(shí)將會(huì)導(dǎo)致子元素?zé)o法撐起父元素的高度，導(dǎo)致父元素的高度塌陷。
由于父元素的高度塌陷了，則父元素下的所有元素都會(huì)向上移動(dòng)，這樣將會(huì)導(dǎo)致頁(yè)面布局混亂。
所以在開(kāi)發(fā)中一定要避免出現(xiàn)高度塌陷的問(wèn)題,
二：4種高度塌陷解決方案
解決方案一
將父元素的高度寫(xiě)死，最簡(jiǎn)單的避免塌陷問(wèn)題的出現(xiàn)，
但是一旦高度寫(xiě)死，父元素的高度將不能自動(dòng)適應(yīng)子元素的高度，所以這種方案是不推薦使用的。
解決方案二：
開(kāi)啟BFC屬性
頁(yè)面元素中的隱含屬性：Block Formatting Context 即塊格式化上下文，簡(jiǎn)稱(chēng)BFC，當(dāng)開(kāi)啟元素的BFC以后，元素會(huì)變成一個(gè)獨(dú)立的布局區(qū)域，不會(huì)在布局上影響到外面的元素，BFC 理解為一個(gè)封閉的大箱子，箱子內(nèi)部的元素不會(huì)影響到外部。
開(kāi)啟BFC后，元素將會(huì)具有如下的特性：
1.父元素的垂直外邊距不會(huì)和子元素重疊
2.開(kāi)啟BFC的元素不會(huì)被浮動(dòng)元素所覆蓋
3.開(kāi)啟BFC的元素可以包含浮動(dòng)的子元素（可解決高度塌陷）
如何開(kāi)啟元素的BFC
1.設(shè)置元素浮動(dòng)（不推薦）
- 使用這種方式開(kāi)啟，雖然可以撐開(kāi)父元素，但是會(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是副作用最小的開(kāi)啟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)，所以他是可以撐開(kāi)父元素的高度的，然后在對(duì)其進(jìn)行清除浮動(dòng)，這樣可以通過(guò)這個(gè)空白的div來(lái)?yè)伍_(kāi)父元素的高度，基本沒(méi)有副作用
當(dāng)然使用這種方式雖然可以解決問(wèn)題，但是會(huì)在頁(yè)面中添加多余的結(jié)構(gòu)。
解決方案四：
通過(guò)after偽類(lèi)向元素的最后添加一個(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種解決方案的文章就介紹到這了,更多相關(guān)CSS中浮動(dòng)float高度塌陷內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了css高度塌陷問(wèn)題的解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)2020-03-24
這篇文章主要介紹了淺談CSS 高度塌陷問(wèn)題的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-25
本文主要介紹了CSS浮動(dòng)引起的高度塌陷問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-27
