高度塌陷與垂直外邊距重疊的解決方式

2021-10-21 21:11:21 字數 516 閱讀 9846

意思是:文件流中父元素高度預設被子元素撐開,但子元素設定浮動以後,就會脫離文件流,導致子元素無法撐起父元素高度,父元素則會高度塌陷,父元素下的所有元素都會向上移動,導致頁面布局混亂

解決方式:

1.為將元素的over-flow設定為乙個非visible(預設)的值 over-flow:hidden;(元素內有相對定位時容易出問題)

2.在高度塌陷的父元素最後新增乙個空白div,這個div並沒有浮動,所以可以撐開父元素高度,然後此div進行清除浮動,達到效果clear:both/left/right;(***幾乎沒有,但是會新增多餘結構)

3.通過after偽類通過after偽類,選中父元素最後邊新增空白內容,然後轉化為塊元素使用該空白塊元素清除浮動

.n:after
解決方式:

.n:before
同時解決高度塌陷和垂直外邊距重疊

.n:before, .n:after

CSS同時解決外邊距重疊和元素高度塌陷問題

解決方案 這裡針對父子元素的外邊距重疊現象 父元素與第乙個子元素的上外邊距發生重疊。例如 外邊距重疊參考文件 當父元素未設定高度時,將所有子元素設定為浮動,便會導致父元素出現高度塌陷。例如 省略html 注意 加上邊框是為了使元素高度塌陷問題更清楚。利用偽元素 before after給父元素增加空...

垂直外邊距重疊問題

當兩個盒子 兄弟元素 處於垂直狀態時,相鄰兩個外邊距不是相加,而是取最大值 當兩個元素是父子關係時,子元素的外邊距 父元素的外邊距 會傳遞給對方 解決方法1 使用文字破壞外邊距相鄰 破壞相鄰狀態 缺點 需要增加html結構 解決方法2 使用border破壞外邊距相鄰 缺點 需要維持可見框大小 解決方...

外邊距的重疊

垂直外邊距的重疊 相鄰的垂直方向外邊距發生重疊現象 兄弟元素 兄弟元素間的相鄰垂直外邊距會取二者之間的較大值 二者都是正值 特殊情況 如果相鄰的外邊距一正一負,則取兩者的和 如果相鄰的外邊距都是負值,則取兩者中絕對值較大的 兄弟元素之間的外邊距的重疊,對於開發是有利的,所以我們不需要處理 第一種情況...