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