父级边框塌陷的问题

clear

/*
clear: right; 右侧不允许有浮动元素
clear: left; 左侧不允许有浮动元素
clear: both; 两侧不允许有浮动元素
clear：none;
 */

解决方案：

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

#father{
    border: 1px #000 solid;
    height: 800px;
}

2、增加一个空的div标签，清除浮动

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

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

3、overflow

在父级元素中增加一个overflow:hidden;

4、父类添加一个伪类：after

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

小结：

1. 浮动元素后面增加空div 简单，代码中尽量避免空div

2. 设置父元素的高度 简单，元素假设有了固定的高度，就会被限制

3. overflow 简单，下拉的一些场景避免使用

4. 父类添加一个伪类:after(推荐) 写法稍微复杂一点，但是没有副作用，推荐使用

对比

• display 方向不可以控制

• float 浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题~