在我们使用html搭建网页时，如果一个父元素中的某个子元素设置浮动后，就会造成父元素的高度塌陷，会导致页面结构混乱。这是因为在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。
但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
​ 由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>清除浮动</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      color: white;
      text-align: center;
      font-size: 20px;
    }
    .father{
      border: 3px solid red;
    }
    .son1{
      width: 400px;
      height: 50px;
      background-color: black;
    }
    .son2{
      width: 600px;
      height: 100px;
      background-color: lawngreen;
      //设置浮动
      float: left;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son1">son1</div>
    <div class="son2">son2</div>
  </div>
</body>
</html>

执行上面代码后，发现父元素只包裹了son1这个元素
在这里插入图片描述这是因为son2元素设置了浮动，脱离了文档流，不在文档流中占据位置，而父元素和son2依然是在文档流中，这就造成了父元素高度塌陷。

解决方法：

1、可以利用clear样式清除浮动
在父元素的最后添加一个空白的div，它可以撑开父元素的高度，然后对其清除浮动。这种方式可以清除浮动，但是会在页面中添加多余的结构。
clear属性取值:
​ none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)
​ left: 不要找前面的左浮动元素
​ right: 不要找前面的右浮动元素
​ both: 不要找前面的左浮动元素和右浮动元素
这里直接使用clear：both

 <div class="father">
    <div class="son1">son1</div>
    <div class="son2">son2</div>
    <div style="clear:both"></div>
  </div>

2、利用after伪类
可以通过after伪类向父元素的最后添加一个空白的块元素，然后对其清除浮动，这样做和添加一个 空白div的原理一样，可以达到一个相同的效果，而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用。

.father::after {
      /*添加一个内容*/
      content: "";
      /*转换为一个块元素*/
      display: block;
      /*清除两侧的浮动*/
      clear: both;
    }

3、给父元素定死高度
给父元素定死高度，但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。

.father {
    border: 3px solid red;
    height:800px;
   }

4、父元素添加overflow方法
可以通过触发BFC的方式，实现清楚浮动效果。同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度。而且 overflow不为visible才能开启BFC

.father {
     border: 3px solid red;
     overflow: hidden;
   }

补充：

给父元素开启BFC，也能解决高度塌陷问题，
BFC是一个独立的布局环境，BFC内部的元素布局与外部互不影响。详细内容大家可以上网查找，这里略提一手。
BFC的作用：

解决浮动元素令父元素高度坍塌的问题

方法：给父元素开启BFC

原理：计算BFC的高度时，浮动子元素也参与计算
开启BFC：
1.float属性不为none

2.position 为absolute或fixed

3.display为inline-block table-cell table-caption flex inline-flex

4.overflow不为visible时

如果有什么错误或更好的建议，欢迎评论区里指出！！！

# css # html # html5
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟