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