解决父级边框塌陷的方法

边框塌陷怎么解决：

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：写法比上面稍微复杂一点，但是没有副作用，推荐使用