CSS 中的 Clear

为什么要清除浮动

一个块级元素的如果没有设置 height, 则其高度由其子元素撑开. 如果所有子元素都是浮动的(脱离标准文档流), 那么父元素就会发生”坍塌”.

两种情况

清除浮动包括清除子元素浮动和清除上级元素浮动, 如果要清除上级元素浮动, 只需要设置 clear:both 即可.
如果要清除子元素浮动, 可以用空标签法, clearfix 法或者 overflow 法.

clear 的用法

.subElement{
    clear:both;
}
`</pre>

##### clearfix(最优浮动闭合方案)

父元素添加 class=clearfix
简洁版

<pre>`.clearfix:before, .clearfix:after{
  content:"";
    display:table;
}
.clearfix:after{
  clear:both;
    overflow:hidden;
}
.clearfix{
  zoom:1;
}
`</pre>

经典版

<pre>`.clearfix:after{
  display:block;
    content:"";
    clear:both;
    height:0;
    visibility:hidden
}
`</pre>

使用时在浮动元素的父元素上添加 class="clearfix"

#### 简单的方法

<pre>`.clearfix{
  overflow:auto;
  _height:1%;
}
`</pre>

#### 常用的方法

<pre>`.clearfix{
  clear:both;
  height:0;
  overflow:hidden;
}

在需要清除浮动的地方加上一个 div.clear 或者 br.clear(不是套上)