CSS Clear: Learn to Clear Floating Elements

文档流

正常文档流

文档流即元素在页面中出现的先后顺序；正常文档流又称为普通文档流或者普通流，即 W3C 标准所说的 normal flow。正常文档流，将一个页面从上到下分为多行，其中块元素独占一行，相邻行内元素在每一行中按照从左到右排列，直到该行排满，也就是默认情况下页面内的元素布局情况。
正常文档流也可以说成是没有使用浮动和定位去改变的默认情况下的 HTML 文档结构。

脱离文档流

脱离文档流即脱离正常的文档流，可以使用两种方式改变正常的文档流：浮动和定位。

什么是 CSS 清除浮动

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

<h2>Without clear</h2>
<section>
  <img src="http://zhuangyin8.github.io/images/9mi_a.jpg" />
  <p>Vertical margins between two floated elements on the other hand will not collapse. When applied to floating elements, the margin edge of the bottom element is moved below the margin edge of all relevant floats. This affects the position of later floats, since later floats cannot be positioned higher than earlier ones.</p>
</section>

section {
  background-color: gray;
  border: solid 1px black;
}
section img {
  float: left;
}
section p {
  float: right;
  background: red;
}

解决 CSS 清除浮动

float 布局会脱离文档流，对页面的布局造成影响，比如造成父级的高度坍塌等问题。清除浮动后，便不会影响文档流。下面介绍一下现在清除浮动的一些方式。

使用带 clear 属性的空元素

在浮动元素后使用一个空元素如 <div class="clear"></div>, 并在 CSS 中赋予 .clear{clear:both;} 属性即可清理浮动. 亦可使用 <br class="clear" /> 或 <hr class="clear" /> 来进行清理.

<h2>Without clear</h2>
<section>
  <img src="http://zhuangyin8.github.io/images/9mi_a.jpg" />
  <p>Vertical margins between two floated elements on the other hand will not collapse. When applied to floating elements, the margin edge of the bottom element is moved below the margin edge of all relevant floats. This affects the position of later floats, since later floats cannot be positioned higher than earlier ones.</p>
  <div class="clear"></div>
</section>

section {
  background-color: gray;
  border: solid 1px black;
}
section img {
  float: left;
}
section p {
  float: right;
  background-color: red;
}
.clear {
  clear: both;
}

• 优点: 简单, 代码少, 浏览器兼容性好.
• 缺点: 需要添加大量无语义的 html 元素, 代码不够优雅, 后期不容易维护.

使用 CSS 的 overflow 属性

给浮动元素的容器添加 overflow: hidden; 或 overflow: auto; 可以清除浮动, 在添加 overflow 属性后, 浮动元素又回到了容器层, 把容器高度撑起, 达到了清理浮动的效果.

子元素浮动了，会造成父元素的高度坍塌。只要给父元素添加 overflow: hidden;属性，就可以解决浮动带来的影响。

<h2>Without clear</h2>
<section>
  <img src="http://zhuangyin8.github.io/images/9mi_a.jpg" />
  <p>Vertical margins between two floated elements on the other hand will not collapse. When applied to floating elements, the margin edge of the bottom element is moved below the margin edge of all relevant floats. This affects the position of later floats, since later floats cannot be positioned higher than earlier ones.</p>
</section>

section {
  background-color: gray;
  border: solid 1px black;
  overflow: hidden;
}
section img {
  float: left;
}
section p {
  float: right;
  background-color: red;
}

使用 CSS 的 :after 伪元素

结合 :after 伪元素 (注意这不是伪类, 而是伪元素, 代表一个元素之后最近的元素) 和 IEhack , 可以完美兼容当前主流的各大浏览器, 这里的 IEhack 指的是触发 hasLayout.
给浮动元素的容器添加一个 clearfix 的 class, 然后给这个 class 添加一个 :after 伪元素实现元素末尾添加一个看不见的块元素 (Block element) 清理浮动.

<h2>Without clear</h2>
<section class="clearfix">
  <img src="http://zhuangyin8.github.io/images/9mi_a.jpg" />
  <p>Vertical margins between two floated elements on the other hand will not collapse. When applied to floating elements, the margin edge of the bottom element is moved below the margin edge of all relevant floats. This affects the position of later floats, since later floats cannot be positioned higher than earlier ones.</p>
</section>

section {
  background-color: gray;
  border: solid 1px black;
}
section img {
  float: left;
}
section p {
  float: right;
  background-color: red;
}
.clearfix:after{
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

clear