解決父級邊框塌陷的方法

邊框塌陷怎么解決：

1.浮動元素脫離標准文檔流

2.清除浮動

​ 清除浮動:nclear屬性

值	說明
left	在左側不允許浮動元素
right	在右側不允許浮動元素
both	在左、右兩側不允許浮動元素
none	默認值。允許浮動元素出現在兩側

如:清除兩側浮動
img {
	clear:both;
}

如:
.layer04 {
    border:1px #666 dashed;
    font-size:12px;
    line-height:23px;
    width: 200px;
    float: right;
    clear:both;
}

​ 清除左右浮動

依次清除文本的左右浮動
如:
.layer04 {
    border:1px #666 dashed;
    font-size:12px;
    line-height:23px;
    width: 200px;
    float: right;
    clear:left;
}
.layer04 {
    border:1px #666 dashed;
    font-size:12px;
    line-height:23px;
    width: 200px;
    float: right;
    clear:right;
}

​ 解決父級邊框塌陷的方法

clear屬性可以清除浮動對其他元素造成的影響，可是依然解決不了父級邊框塌陷問題，怎么辦？

浮動元素后面加空div

如:
<div id="father">
  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
  <div class="layer02"><img src="image/photo-2.jpg" alt="圖書" /></div>
  <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
  <div class="layer04">浮動的盒子……</div>
  <div class="clear"></div>
</div>
.clear{  clear: both;  margin: 0; padding: 0;}

設置父元素的高度

如:
<div id="father">
  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
  <div class="layer02"><img src="image/photo-2.jpg" alt="圖書" /></div>
  <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
  <div class="layer04">浮動的盒子……</div>
</div>
#father {height: 400px; border:1px #000 solid; }

父級添加overflow屬性

如:
<div id="father">
  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
  <div class="layer02"><img src="image/photo-2.jpg" alt="圖書" /></div>
  <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
  <div class="layer04">浮動的盒子……</div>
</div>
#father {overflow: hidden;border:1px #000 solid; }

父級添加偽類after

如:
<div id="father" class="clear">
  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
  <div class="layer02"><img src="image/photo-2.jpg" alt="圖書" /></div>
  <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
  <div class="layer04">浮動的盒子……</div>
</div>
.clear:after{
    content: '';          /*在clear類后面添加內容為空*/
    display: block;      /*把添加的內容轉化為塊元素*/
    clear: both;         /*清除這個元素兩邊的浮動*/
}

清除浮動，防止父級邊框塌陷的四種方法

1.浮動元素后面加空div：簡單，空div會造成HTML代碼冗余

2.設置父元素的高度:簡單，元素固定高會降低擴展性

3.父級添加overflow屬性：簡單，下拉列表框的場景不能用

4.父級添加偽類after：寫法比上面稍微復雜一點，但是沒有副作用，推薦使用