您好,登錄后才能下訂單哦!
小編給大家分享一下HTML文檔流中設(shè)置元素浮動導(dǎo)致父元素高度無法自適應(yīng)怎么辦,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
元素浮動定義
float 屬性定義元素在哪個方向浮動。以往這個屬性總應(yīng)用于圖像,使文本圍繞在圖像周圍,不過在 CSS 中,任何元素都可以浮動。浮動元素會生成一個塊級框,而不論它本身是何種元素。
如果浮動非替換元素,則要指定一個明確的寬度;否則,它們會盡可能地窄。
注釋:假如在一行之上只有極少的空間可供浮動元素,那么這個元素會跳至下一行,這個過程會持續(xù)到某一行擁有足夠的空間為止。
why 子元素浮動 會導(dǎo)致父元素 高度塌陷?
這是因?yàn)閮?nèi)部的元素設(shè)置float:left || right后,就丟失了clear:both和display:block(持懷疑態(tài)度)的樣式,所以外部的父容器不會被撐開。
舉個 :
子元素未設(shè)置浮動,父元素自動被撐開
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
<style>
.father {
width: 400px;
border: 1px solid blue;
}
.son {
width: 200px;
height: 200px;
border: 1px solid red;
background-color: yellow;
}
</style>
子元素設(shè)置浮動,父元素高度塌陷
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
<style>
.father {
width: 400px;
border: 1px solid blue;
}
.son {
width: 200px;
height: 200px;
border: 1px solid red;
background-color: yellow;
float: left;
}
</style>
閉合浮動的常見解決方案
最終,我們要的效果是要跟沒設(shè)置浮動之前的效果一樣,讓父元素高度自適應(yīng):
在浮動元素之后添加清除浮動的子元素:
<div class="father">
<div class="son"></div>
<div class="clearFloat"></div>
</div>
<style>
.father {
width: 400px;
border: 1px solid blue;
}
.son {
width: 200px;
height: 200px;
border: 1px solid red;
background-color: yellow;
float: left;
}
.clearFloat {
width: 100%;
height: 0;
clear: both;
}
</style>
父元素設(shè)置 overflow: hidden
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
width: 400px;
border: 1px solid blue;
overflow: hidden;
}
.son {
width: 200px;
height: 200px;
border: 1px solid red;
background-color: yellow;
float: left;
}
</style>
是不是很神奇!因?yàn)樽釉氐母樱瑫?dǎo)致父元素誤認(rèn)為content高度為0(即藍(lán)色邊框?yàn)橐粭l線),所以父元素設(shè)成overflow:hidden溢出隱藏的話,直覺上應(yīng)該子元素由于溢出導(dǎo)致不顯示才對。但真實(shí)效果是:父元素設(shè)成overflow:hidden溢出隱藏后,父元素高度居然自適應(yīng)了!這是怎么回事呢?是因?yàn)?BFC(Block Formatting Context),感興趣的童鞋,點(diǎn)擊鏈接了解一下哈...
用 :after 偽元素,思路是用:after元素在div后面插入一個隱藏文本”.”,隱藏文本用clear來實(shí)現(xiàn)閉合浮動
.father:after {
clear: both;
content: "."; //任意文本如“dfgdfg”
display: block;
height: 0; //高度為0且hidden讓該文本徹底隱藏
visibility: hidden;
}
以上是“HTML文檔流中設(shè)置元素浮動導(dǎo)致父元素高度無法自適應(yīng)怎么辦”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。