欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

HTML文檔流中設(shè)置元素浮動(dòng)導(dǎo)致父元素高度無(wú)法自適應(yīng)怎么辦

小編給大家分享一下HTML文檔流中設(shè)置元素浮動(dòng)導(dǎo)致父元素高度無(wú)法自適應(yīng)怎么辦，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司是一家服務(wù)多年做網(wǎng)站建設(shè)策劃設(shè)計(jì)制作的公司,為廣大用戶提供了成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、成都外貿(mào)網(wǎng)站建設(shè)，成都網(wǎng)站設(shè)計(jì)，1元廣告，成都做網(wǎng)站選成都創(chuàng)新互聯(lián)，貼合企業(yè)需求，高性價(jià)比，滿足客戶不同層次的需求一站式服務(wù)歡迎致電。

元素浮動(dòng)定義

float 屬性定義元素在哪個(gè)方向浮動(dòng)。以往這個(gè)屬性總應(yīng)用于圖像，使文本圍繞在圖像周圍，不過(guò)在 CSS 中，任何元素都可以浮動(dòng)。浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，而不論它本身是何種元素。

如果浮動(dòng)非替換元素，則要指定一個(gè)明確的寬度；否則，它們會(huì)盡可能地窄。

注釋：假如在一行之上只有極少的空間可供浮動(dòng)元素，那么這個(gè)元素會(huì)跳至下一行，這個(gè)過(guò)程會(huì)持續(xù)到某一行擁有足夠的空間為止。

why 子元素浮動(dòng) 會(huì)導(dǎo)致父元素 高度塌陷？

這是因?yàn)閮?nèi)部的元素設(shè)置float:left || right后，就丟失了clear:both和display:block（持懷疑態(tài)度）的樣式，所以外部的父容器不會(huì)被撐開(kāi)。

舉個(gè) ：

子元素未設(shè)置浮動(dòng)，父元素自動(dòng)被撐開(kāi)

<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è)置浮動(dòng)，父元素高度塌陷

<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>

閉合浮動(dòng)的常見(jiàn)解決方案

最終，我們要的效果是要跟沒(méi)設(shè)置浮動(dòng)之前的效果一樣，讓父元素高度自適應(yīng)：

在浮動(dòng)元素之后添加清除浮動(dò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òng)，會(huì)導(dǎo)致父元素誤認(rèn)為content高度為0（即藍(lán)色邊框?yàn)橐粭l線），所以父元素設(shè)成overflow:hidden溢出隱藏的話，直覺(jué)上應(yīng)該子元素由于溢出導(dǎo)致不顯示才對(duì)。但真實(shí)效果是：父元素設(shè)成overflow:hidden溢出隱藏后，父元素高度居然自適應(yīng)了！這是怎么回事呢？是因?yàn)?BFC（Block Formatting Context），感興趣的童鞋，點(diǎn)擊鏈接了解一下哈...

用 :after 偽元素，思路是用:after元素在div后面插入一個(gè)隱藏文本”.”，隱藏文本用clear來(lái)實(shí)現(xiàn)閉合浮動(dòng)

.father:after {

clear: both;

content: ".";   //任意文本如“dfgdfg”

display: block;

height: 0;      //高度為0且hidden讓該文本徹底隱藏

visibility: hidden;

}

以上是“HTML文檔流中設(shè)置元素浮動(dòng)導(dǎo)致父元素高度無(wú)法自適應(yīng)怎么辦”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

名稱欄目：HTML文檔流中設(shè)置元素浮動(dòng)導(dǎo)致父元素高度無(wú)法自適應(yīng)怎么辦
當(dāng)前路徑：http://chinadenli.net/article2/jijcic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、微信小程序、網(wǎng)站導(dǎo)航、全網(wǎng)營(yíng)銷推廣、、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)