# 清除浮动

2 min read
css
Table of Contents

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

例子

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


<style>
.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;
}
<style>


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

清除浮动的方法

  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 伪元素方法清除浮动，文档结构清晰。

More Posts