- 所在位置：
- 首頁 >
- 編程技術(shù) >
- CSS/HTML >
- CSS中高度塌陷問題是什么原因，怎么樣解決？
CSS中高度塌陷問題是什么原因，怎么樣解決？
Admin 2022-02-22 群英技術(shù)資訊 1614 次瀏覽
這篇文章給大家分享的是CSS中高度塌陷問題的原因及解決方法。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，文中的示例代碼介紹得很詳細(xì)，有需要的朋友可以參考，接下來就跟隨小編一起了解看看吧。
1. 高度塌陷
在文檔流中，父元素的高度默認(rèn)被子元素?fù)伍_，也就是說子元素多高，父元素就多高。但是， 當(dāng)為子元素設(shè)置浮動(dòng)后，子元素會(huì)完全脫離文檔流。此時(shí)，將會(huì)導(dǎo)致子元素?zé)o法撐起父元素的高度，導(dǎo)致父元素的高度塌陷。
- 由于父元素的高度塌陷了，則父元素下的所有元素都會(huì)向上移動(dòng)，這樣將會(huì)導(dǎo)致頁面布局混亂。
- 所以在開發(fā)中一定要避免出現(xiàn)高度塌陷的問題。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box1{
border: 10px solid red;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">a</div>
</div>
</body>
</html>
結(jié)果：父元素box1的高度被子元素box2的a內(nèi)容撐開。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box1{
border: 10px solid red;
}
.box2{
width: 100px;
height: 100px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">a</div>
</div>
</body>
</html>
結(jié)果：父元素的高度被子元素的高度100撐開。
若為子元素設(shè)置浮動(dòng)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box1{
border: 10px solid red;
}
.box2{
width: 100px;
height: 100px;
background-color: greenyellow;
float: left;
}
.footer{
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="footer"></div>
</body>
</html>
結(jié)果：子元素浮動(dòng)，父元素沒有了高度。footer向上移動(dòng)。
為父元素設(shè)置高度，避免塌陷：
.box1{
border: 10px solid red;
height: 100px;/* 設(shè)置父元素的高度*/
}
結(jié)果：
但是當(dāng)子元素的高度較高時(shí)，又會(huì)產(chǎn)生溢出的問題。父元素的高度一旦固定，父元素的高度將不能自動(dòng)適應(yīng)子元素的高度，所以這種方案不推薦使用：
.box2{
width: 100px;
height: 200px;
background-color: greenyellow;
float: left;
}
結(jié)果：
2. 解決塌陷問題
根據(jù)w3c的標(biāo)準(zhǔn)，在頁面中的元素都有一個(gè)隱含的屬性叫做Block Formatting Context, 簡稱BFC。該屬性可以設(shè)置打開或者關(guān)閉，默認(rèn)是關(guān)閉的。
當(dāng)開啟元素的BFC以后，元素將會(huì)具有如下的特征：
(1) 父元素的垂直外邊距不會(huì)和子元素重疊
(2) 開啟BFC的元素不會(huì)被浮動(dòng)元素所覆蓋
(3) 開啟BFC的元素可以包含浮動(dòng)的子元素
如何開啟元素的BFC:
設(shè)置元素浮動(dòng)
使用這種方式，雖然可以撐開父元素，但是會(huì)導(dǎo)致父元素的寬度丟失，而且使用這種方式也會(huì)導(dǎo)致下邊的元素上移，不能解決問題
設(shè)置元素絕對定位。也有上面的問題
設(shè)置元素為inline-block，可以解決問題，但是會(huì)導(dǎo)致寬度丟失，不推薦使用這種方式
將元素的overflow 設(shè)置為一個(gè)非visible的值
推薦方式： 將父元素overflow設(shè)置為hidden，是副作用最小的開啟BFC的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box1{
border: 10px solid red;
overflow: hidden;
}
.box2{
width: 100px;
height: 100px;
background-color: greenyellow;
float: left;
}
.footer{
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="footer"></div>
</body>
</html>
結(jié)果：
注意： 但是在IE6中是不支持BFC的。所以引入hasLayout。
在IE6中有另一個(gè)隱含的屬性叫做hasLayout,該屬性的作用和BFC類似，所以IE6瀏覽器可以通過開hasLayout來解決問題。開啟方式有很多，但是副作用最小的方式是： 直接將元素的zoom設(shè)置為1即可。
zoom表示放大的意思，后邊跟一個(gè)數(shù)值，寫幾就是將元素放大幾倍。
zoom:1 表示不放大元素，但是通過該樣式可以開啟hasLayout。
zoom這個(gè)樣式，只在IE中支持，其他瀏覽器都不支持。
zoom: 1;/* 兼容ie6*/ overflow: hidden;/* 兼容非ie6*/
關(guān)于CSS中高度塌陷問題及解決方法就介紹到這，上述方法和示例具有一定的借鑒價(jià)值，感興趣的朋友可以參考，希望能對大家有幫助，想要了解更多，大家可以關(guān)注群英網(wǎng)絡(luò)其它的相關(guān)文章。
文本轉(zhuǎn)載自腳本之家
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：[email protected]進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，查實(shí)之后，將立刻刪除涉嫌侵權(quán)內(nèi)容。
猜你喜歡
-
用HTML+CSS怎么寫導(dǎo)航的下拉菜單，代碼是什么
菜單欄在很多地方都可以用到，尤其是帶下拉的菜單欄，本文主要介紹了HTML+CSS實(shí)現(xiàn)導(dǎo)航條下拉菜單，具有一定的參考價(jià)值，感興趣的可以了解一下
-
提升CSS網(wǎng)頁渲染速度的11個(gè)小技巧分享
在前端開發(fā)中我們會(huì)經(jīng)常提到渲染這個(gè)詞，CSS網(wǎng)頁渲染是瀏覽器工作，對于渲染簡單的理解就是展示，將網(wǎng)站后臺(tái)的數(shù)據(jù)渲染給用戶看。我們能通過提升網(wǎng)頁渲染速度來提升網(wǎng)頁速度。
-
詳解使用css實(shí)現(xiàn)fullpage.js全屏滾動(dòng)
全屏滾動(dòng)效果是網(wǎng)頁設(shè)計(jì)中比較常見的，能用戶良好的視覺和交互體驗(yàn)。一般我們用fullpage.js來實(shí)現(xiàn)全屏滾動(dòng)，fullpage.js是一個(gè)基于jQuery的插件，能夠輕松制作出全屏網(wǎng)站。其實(shí)CSS也能實(shí)現(xiàn)全屏滾動(dòng)效果，下面我們來具體看看。
-
CSS中的padding內(nèi)邊距設(shè)置及應(yīng)用是怎樣的
css padding內(nèi)邊距的理解：1、padding在元素中增加了內(nèi)部間距。其目標(biāo)可根據(jù)使用情況而變化。2、垂直padding不適用于有display:inline的元素，如果添加內(nèi)部邊距，不會(huì)影響元素。
-
CSS樣式層疊的規(guī)則是什么，使用要注意哪些?
這篇文章我們來了解CSS樣式層疊的相關(guān)內(nèi)容，在使用CSS樣式層疊時(shí)，有一些規(guī)則及注意的事項(xiàng)是要留意的，對此本文就給大家來介紹一下，對大家學(xué)習(xí)和理解CSS樣式層疊會(huì)有一定的幫助，有需要的朋友可以參考，接下來就跟隨小編來一起學(xué)習(xí)一下吧！
推薦內(nèi)容
- CSS中flex布局如何實(shí)現(xiàn)自動(dòng)換行？
- 在HTML中如何讓button居中，有幾種方法
- JS中怎樣刪除數(shù)組末尾元素？教你兩種方法
- vue怎樣獲取url參數(shù)?教你兩種方法
- 如何用Python計(jì)算BMI指數(shù)？一文帶你看懂
- python怎樣獲取數(shù)組元素的下標(biāo)？教你三種方法
- python中的ord函數(shù)有什么用？用法是什么？
- Python中array與list轉(zhuǎn)換如何做，方法是什么
- 在CSS中怎么實(shí)現(xiàn)一條橫線，方法是什么
- Python怎樣設(shè)計(jì)串口之間通信的程序
- phpstorm怎么使用和操作？一文帶你快速了解
- vue怎么給對象數(shù)組賦值？this.$set方法幫你解決
成為群英會(huì)員,開啟智能安全云計(jì)算之旅
立即注冊友鏈合作 群英網(wǎng)絡(luò) 智帝云 主機(jī)評測 idc公司 商城系統(tǒng) 跨境電商 主機(jī)吧 酷庫博客 OA系統(tǒng) 騰訊企業(yè)郵箱 銳成信息 sdwan
關(guān)注或聯(lián)系群英網(wǎng)絡(luò)
7x24小時(shí)售前：400-678-4567
7x24小時(shí)售后：0668-2555666
24小時(shí)QQ客服
群英微信公眾號(hào)
CNNIC域名投訴舉報(bào)處理平臺(tái)
服務(wù)電話：010-58813000
服務(wù)郵箱：[email protected]
投訴與建議：0668-2555555
Copyright ? QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版權(quán)所有
增值電信經(jīng)營許可證 : B1.B2-20140078 ICP核準(zhǔn)（ICP備案）粵ICP備09006778號(hào) 域名注冊商資質(zhì) 粵 D3.1-20240008
