CSS浮動(dòng)引起的高度塌陷問題
發(fā)布時(shí)間：2022-07-27 16:05:43 作者：廢物的自我修養(yǎng)記錄 
我要評(píng)論
我要評(píng)論本文主要介紹了CSS浮動(dòng)引起的高度塌陷問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
正常頁面布局
<style>
*{
margin:0;
padding: 0;
}
.content{
width:400px;
border:1px solid #000;
}
.box{
width:200px;
height:200px;
background: greenyellow;
}
</style>
<body>
<div class="content">
<div class="box"></div>
</div>
<p>基苦阿斯蒂芬</p>
</body>
當(dāng)給類名為.box的盒子加上浮動(dòng)后
<style>
*{
margin:0;
padding: 0;
}
.content{
width:400px;
border:1px solid #000;
}
.box{
width:200px;
height:200px;
background: greenyellow;
float: left;
}
</style>
可以看到頁面布局已經(jīng)亂了，因?yàn)樵卦O(shè)置浮動(dòng)后會(huì)脫離文檔流
解決方案
1 利用BFC(給父元素加上overflow:hidden)
**缺點(diǎn)：父元素溢出的元素會(huì)隱藏，可能會(huì)影響頁面顯示 **
.content{
width:400px;
border:1px solid #000;
overflow: hidden;
}
2 加空div
要點(diǎn)：
1.加上一個(gè)空的塊級(jí)元素
2.對(duì)塊級(jí)元素進(jìn)行清除浮動(dòng)， 省事方法，不管理是左浮還是右浮，直接全清(clear:both)
<style>
*{
margin:0;
padding: 0;
}
.content{
width:400px;
border:1px solid #000;
/* overflow: hidden; */
}
.box{
width:200px;
height:200px;
background: greenyellow;
float: left;
}
.clear{
clear: both;
}
</style>
<body>
<div class="content">
<div class="box"></div>
<div class="clear"></div>
</div>
<p>基苦阿斯蒂芬</p>
</body>
3 利用偽元素
要點(diǎn)：
1 其實(shí)和加空div的原理是一致的，唯一要記住的就是把偽元素轉(zhuǎn)為塊級(jí)元素(display:block)，否則會(huì)沒有效果
2 還有偽元素的屬性不要忘記加上(content:‘’)
<style>
*{
margin:0;
padding: 0;
}
.content{
width:400px;
border:1px solid #000;
/* overflow: hidden; */
}
.content::after{
content: '';
display: block; // 必須要轉(zhuǎn)換為塊元素
clear: both;
}
.box{
width:200px;
height:200px;
background: greenyellow;
float: left;
}
/* .clear{
clear: both;
} */
</style>
<body>
<div class="content">
<div class="box"></div>
<!-- <div class="clear"></div> -->
</div>
<p>基苦阿斯蒂芬</p>
</body>
到此這篇關(guān)于CSS浮動(dòng)引起的高度塌陷問題的文章就介紹到這了,更多相關(guān)CSS浮動(dòng)高度塌陷內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
淺談CSS中浮動(dòng)float帶來的高度塌陷問題及4種解決方案
本文主要介紹了CSS中浮動(dòng)float帶來的高度塌陷問題及4種解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小2022-04-14
這篇文章主要介紹了css高度塌陷問題的解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)2020-03-24
這篇文章主要介紹了淺談CSS 高度塌陷問題的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-25
