父級邊框塌陷的問題

clear

/*

clear: right; 右側不允許有浮動元素
clear: left; 左側不允許有浮動元素
clear: both; 兩側不允許有浮動元素
clear：none;
*/

解決方案：

1、增加父級元素的高度~

#father

2、增加乙個空的div標籤，清除浮動

<

div 
class
="clear"
>
div>
.clear

3、overflow

在父級元素中增加乙個overflow:hidden;

4、父類新增乙個偽類：after

#father:after

小結：浮動元素後面增加空div簡單，**中盡量避免空div

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

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

父類新增乙個偽類:after(推薦)寫法稍微複雜一點，但是沒有***，推薦使用

對比

overflow及父級邊框塌陷問題

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

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

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

邊框塌陷的問題

今天週六要過來上班，閒來無事就又研究了一下css的問題，前一段時間去面試，被問到邊框塌陷的問題，我是乙個小白，只是知道並沒有深入的去了解，今天在網上查了一下，自己也去敲了一遍，終於有所了解。下面是我寫的乙個demo。開啟瀏覽器，我想有些小白肯定和我想的一樣，樣式呈現出來如下 如果認為如上圖的話 那麼...