overflow及父級邊框塌陷問題

2022-09-20 20:09:08 字數 556 閱讀 9542

clear

/*


clear：right;    右側不允許有浮動元素


clear：left;     左側不允許有浮動元素


clear：both;     兩側不允許有浮動元素


clear：none;


*/
解決方案：

增加父級元素的高度~

#father
增加乙個空的div標籤，清除浮動



.clear
overflow

在父級元素中增加乙個 overflow:hidden;
1.父類新增乙個偽類：after

#father:after
小結：

浮動元素後面增加空div

簡單，**中盡量避免空div

設定父元素的高度

簡單，元素假設有了固定的高度，就會被限制

overflow

簡單，下拉的一些場景避免使用

父級邊框塌陷的問題

clear clear right 右側不允許有浮動元素 clear left 左側不允許有浮動元素 clear both 兩側不允許有浮動元素 clear none 解決方案 1 增加父級元素的高度 father 2 增加乙個空的div標籤，清除浮動 div class clear div cle...

前端學習（14）解決父級邊框塌陷的問題

clear clear right 右側不允許有浮動元素 clear left 左側不允許有浮動元素 clear both 兩側不允許有浮動的元素 clear none 解決方案 增加父級元素的高度 father增加乙個空的div標籤，清除浮動 class clear div clearoverfl...

float浮動時，解決父級邊框塌陷的4種方法

父級邊框塌陷的原因 我們在進行網頁布局時，會用到float浮動屬性，只要父級元素下的子元素浮動了，肯定會影響父級元素的邊框。假設父級元素下有十個子元素，我們無論是全部浮動還是只浮動了乙個元素，都要對父級元素採取措施防止邊框塌陷。為什麼這樣說，我們可以試驗一下，如果你只浮動了乙個子元素，咱們讓這個浮動...