当未设置容器高度时,同时容器内有浮动的元素时,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响布局的现象,这个现象叫浮动溢出。为了防止这种现象出现而进行的 CSS 处理,就叫清除浮动

例子

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

.container {
  border: solid 1px black;
}

.left{
  width: 30px;
  height: 20px;
  background-color: ##DDA0DD;
  float: left;
}

.right {
  width: 60px;
  height: 40px;
  background-color: #14CC8D;
  float: right;
}



如上所示:容器没有包围浮动元素,清除浮动后可以参考下面链接。

清除浮动的方法

  1. 使用 clear: both 的空元素
    在浮动元素后使用一个空元素如 <div style={ clear:both; }></div> 即可清理浮动。
    注:不推荐采用。需要添加无语义的html元素,代码不够优雅,后期不易维护。

  2. 使用 overflow: hidden 属性
    给容器添加 overflow:hidden 可以清除浮动。
    注:不推荐采用。离开容器所在的区域会被隐藏

  3. 使用 :after 伪元素
    给容器添加一个 :after 伪元素,实现元素末尾添加一个看不见的块。
    注:推荐采用。注意设置 :after 属性值

    .container:after {
      content: "";
      display: block;
      height: 0;
      clear: both;         
      visibility: hidden;
    }
    

CodePen:清楚浮动

总结

推荐使用 :after 伪元素方法清除浮动,文档结构清晰。