[前端知识点]css清除浮动

---

清除浮动概念

在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象，这个现象叫浮动溢出。
为了防止这个现象的出现而进行的CSS处理，就叫清除浮动。

具体表现如下：

• 左、右盒子没有float属性，可以撑开父盒子（红色边框）
• 加了float属性后，左、右盒子脱离文档流，且父盒子变为一条线，没有包围子盒子
  
  再联系开头解释，可以理解浮动和清除浮动问题

html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style type="text/css">
      *{
        margin: 0;
        padding: 0;
      }
      .main{
        border: 2px solid red;
        width: 310px;
      }
      .left{
        background: green;
        float: left;
        height: 200px;
        width: 200px;
      }
      .right{
        background: blue;
        float: left;
        height: 100px;
        width: 100px;
      }
    </style>
</head>

<body>
  <div class="main">
    <div class="left">左</div>
    <div class="right">右</div>
  </div>

</body>
</html>

以下将介绍较为推荐的清除浮动的三个方法：

1. clear:both
2. overflow
3. :after伪元素

---

一、使用clear:both清除浮动

在浮动盒子后放一个空的div标签，然后给这个标签设置clear:both来清除浮动对页面的影响
优点是简单，方便兼容性好，但是一般情况下不建议使用该方法，因为会造成结构混乱，不利于后期维护

<body>
  <div class="main">
    <div class="left">左</div>
    <div class="right">右</div>
    <div style="clear: both"></div>
  </div>
</body>

二、使用overflow属性

给父元素设置overflow样式，可以是overflow:hidden或overflow:auto
本质就是建构了一个BFC，这样使得达到撑起父元素高度的效果

.main{
  overflow: hidden;
  border: 2px solid red;
  width: 310px;
}

三、使用伪元素after清除浮动

给父级元素添加了一个:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的

.main{
  border: 2px solid red;
  width: 310px;
}
.main:after{
  content:"";
  display:block;
  clear:both;
}

如果还有其他推荐方法，欢迎大家私信或评论区给出建议