關於高度塌陷的解決方法及優缺點

2021-09-27 07:53:32 字數 458 閱讀 4020

2.給父元素新增屬性:overflow:hidden;

優點:瀏覽器好支援,簡單;

缺點:當子元素有定位屬性時,設定了之後,超出部分會被隱藏掉

3.在最後乙個浮動元素之後新增乙個塊元素 來清浮動:clear:both;

優點:所有瀏覽器都支援,並且容器溢位不會被裁剪;

缺點:在頁面中新增無意義的div,容易造成**冗餘。

4.萬能清除法:配合第二種方式通過偽元素實現

clear:after

優點:不會造成**冗餘,剩餘**效能優化,推薦使用。

除此之外,還有一模擬較特殊,那就是bfc(overflow:hidden也包含在bfc裡),什麼是bfc呢

bfc (block fomatting content)是頁面中的一塊渲染區域,並且有一套渲染規則,它決定了其子元素將如何定位,以及和其他元素的關係和相互作用。

舉例:* 脫離的文件流的元素

高度塌陷及解決方法

一 什麼是高度塌陷 在文件流中,當父元素沒有設定高度的時候,父元素的高度就取決於子元素的高度,也就是常常說的 由子元素撐開 當子元素設定為浮動,脫離了文件流,這時候就會造成父元素的高度塌陷,因為沒有子元素 撐著它的高度 這樣會導致父元素後面的元素往上移,造成布局混亂。二 解決此問題的方法 1.在後面...

高度塌陷解決方法

如果父元素只包含浮動元素,且父元素未設定高度和寬度,那麼它的高度就會塌縮為零,也就是所謂的 高度塌陷 如果父級元素包含背景或者邊框,那麼溢位的元素就不像父級元素的一部分了。解決 高度塌陷 問題的方法 1.浮動父級元素,父級元素的高度就會擴大,直到完全包含它裡面的浮動元素。如果使用這種方法,一定要在該...

高度塌陷的原因及解決方法

子元素可以撐開父元素的高度,但是子元素如果有浮動就不能撐不開父元素的高度 高度塌陷了 什麼情況下會出現高度塌陷,子元素浮動,而父元素沒有高度會出現高度塌陷。解決高度塌陷的方法 方法1 給父元素加overflow hidden 觸發了bfc 缺點 超出的元素會被隱藏。方法2 給需要清浮動的地方加乙個空...