问题描述

 网页布局时，使用 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（推荐）

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

————————————————

版权声明：本文为CSDN博主「Acx7」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/Acx77/article/details/120788389