父级边框塌陷

问题描述

  网页布局时，使用 float 浮动属性，如果父级元素的子元素浮动了，就会影响到父级元素的边框。

eg：

未添加 float 属性：未塌陷

添加 float 属性后：塌陷

期待结果：使用 float 未塌陷

解决方法

1、增加父级元素的高度

#father {
	height: 800px;
}

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

/*添加在浮动子元素后*/
<div class="clear"></div>

/*为该空标签添加clear: both*/
.clear{
    margin: 0;
    padding: 0;    
    clear: both;
}

eg：

3、overflow

/*在父级元素中添加overflow: hidden*/
overflow:hidden;

eg：

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

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

总结

1、增加父级元素的高度（不推荐）

  操作简单，但高度无法确定，会被限制，不能从本质上解决问题。

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

  操作简单，但是加了一个空的div，增加代码复杂性、造成代码的冗余。

3、overflow

  操作简单，但是有一点不好，在有下拉菜单的时候，下拉菜单会显示不出来，下拉的一些场景避免使用。

4、父类添加一个伪类：after（推荐）

  写法较复杂，但是无副作用，推荐使用。