高度塌陷的解決方法以及如何觸發BFC

2021-10-08 10:52:45 字數 314 閱讀 2774

解決高度塌陷:

hack1:給父元素新增宣告overflow:hidden;(觸發乙個bfc)

hack2:在浮動元素下方新增空div,並給該元素新增宣告:

divhack3:萬能清除浮動法選擇符:

after ie8及以下無效;

觸發bfc

float屬性不為none

position為absolute或fixed

display為inline-block, table-cell, table-caption, flex, inline-flex

overflow不為visible

高度塌陷問題以及解決方法

在浮動布局中,父元素的高度預設是被子元素撐開的,當子元素浮動後,其會完全脫離文件流,子元素從文件流中脫離,將會無法撐起父元素的高度,導致父元素的高度丟失,父元素高度丟失以後,其下的元素會自動上移,導致頁面的布局混亂。下面來定義兩個盒子,box1為父元素,box2為子元素 給子元素box2 開啟浮動 ...

高度塌陷解決方法

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

高度塌陷及解決方法

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