父级边框塌陷

父级边框塌陷的问题

clear属性可以清除浮动对其他元素造成的影响，解决不了父级边框塌陷问题

1.设置父类的高度

#father{
    height:400px;
}

2.添加一个空的div

<div class="clear"></div>

.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

3.父类添加overflow

overflow：hidden

4.父类添加一个伪类

#father:after{
    content:'';
    display:block;
    clear:both;
}

总结：

1.浮动元素后面加空div：

简单，空div会造成HTML代码冗余

2.设置父元素的高度:

简单，元素固定高会降低扩展性

3.父级添加overflow属性：

简单，下拉列表框的场景不能用

4.父级添加伪类after：

写法比上面稍微复杂一点，但是没有副作用，推荐使用