線上服務(wù)咨詢
Article/文章
記錄成長點滴 分享您我感悟
您當(dāng)前位置>首頁 > 知識 > 網(wǎng)站建設(shè)
CSS:解析DIV FLOAT后,父DIV無法高度自適應(yīng)
發(fā)表時間:2019-07-30 16:48:20
文章來源:沈陽軟件開發(fā)
標(biāo)簽:網(wǎng)站建設(shè) 小程序開發(fā) 小程序制作 微信小程序開發(fā) 公眾號開發(fā) 微信公眾號開發(fā) 網(wǎng)頁設(shè)計 網(wǎng)站優(yōu)化 網(wǎng)站排名 網(wǎng)站設(shè)計 微信小程序設(shè)計 小程序定制 微信小程序定制
瀏覽次數(shù):0
在CSS + DIV的布局中,經(jīng)常發(fā)現(xiàn)當(dāng)DIV浮動時,如果其高度超過其父DIV的高度,則其父DIV的高度將不會相應(yīng)地調(diào)整。為了解決這個問題(也稱為關(guān)閉(清算)浮動),我們有四種方法:
1.附加標(biāo)簽方法
此方法是在父容器的末尾插入額外標(biāo)記并清除它以清除父容器。這種瀏覽器兼容性方法很好,沒有問題,缺點是你需要額外的(通常沒有語義)標(biāo)簽。我個人喜歡這種方法,因為它簡單,實用,兼容瀏覽器,W3C也推薦使用這種方法
2.使用after偽類
此方法是使用指定當(dāng)前內(nèi)容末尾的after偽類和內(nèi)容聲明將新內(nèi)容添加到父容器。通常的做法是增加一個“點”,因為它不太明顯。然后我們用它來清除浮動(關(guān)閉浮動元素)并隱藏內(nèi)容。這種方法通常是兼容的,但它可以通過各種黑客處理不同的瀏覽器,同時確保html是干凈的。
#outer:在{content:“。”; height: 0; visibility: hidden; display: block; clear: both;}
3.將溢出設(shè)置為隱藏或自動
這是通過將父容器的溢出設(shè)置為hidden或auot來關(guān)閉標(biāo)準(zhǔn)兼容瀏覽器中的浮動元素來完成的。但是,使用溢出時,可能會影響頁面的性能,并且影響是不確定的。您可以在多個瀏覽器上測試您的頁面。 #outer {overflow: auto; zoom: 1;} overflow: auto;是使高度自適應(yīng),縮放: 1;是與IE6兼容,你也可以使用高度: 1%;
浮動外部元素float-in-float是讓父容器也浮動,這利用了浮動元素的屬性。——浮動元素關(guān)閉浮動元素。這種方法在IE/Win和標(biāo)準(zhǔn)兼容瀏覽器中有很好的效果,但缺點也很明顯。——父容器不一定是浮動和浮動的。畢竟,浮動是一種特殊行為,有時不允許布局。它的漂浮也很正常。看看你自己的代碼示例:src=“./dms/get.html?path=”alt=“\”style=“display: inline-block;寬度: 93px;身高: 90px“/>
在迭代內(nèi)部會有很多div,其中div將向左浮動,因此父div的高度不是自適應(yīng)的。
網(wǎng)站建設(shè),小程序開發(fā),小程序制作,微信小程序開發(fā),公眾號開發(fā),微信公眾號開發(fā),網(wǎng)頁設(shè)計,網(wǎng)站優(yōu)化,網(wǎng)站排名,網(wǎng)站設(shè)計,微信小程序設(shè)計,小程序定制,微信小程序定制