如何清除浮动

发表于 分类于 / Changyan：

为什么要清除浮动

其实浮动（e.g. float: left;）本质上是用来做文字混排的，但却被我们拿来做布局，这个时候虽然实现了某些效果，但也带来了不少副作用。

由于浮动元素不再占有原文档流的位置，所以它会对后续元素的排版带来影响（无视浮动元素，就当它不存在过）。因此我们很多时候要做的，就是消除浮动元素造成的影响。清除浮动的本质主要是为了解决父元素因为子元素浮动造成的内部高度为0的问题。

clear

清除浮动的核心css属性是 clear ，基本语法如下：

1
2
3
选择器: {
    clear: 属性值;
}
属性值 描述
left 不允许左侧有浮动元素（清除左侧浮动的影响）
right 不允许右侧有浮动元素（清除右侧浮动的影响）
both 同时清除左右两侧浮动的影响

清除浮动常见方案

额外标记法

在浮动元素后面添加一个空标签，例如：

1
2
<div style="float: left;"></div>
<div style="clear: both;"></div>

优点：通俗易懂，书写方便
缺点：加入了过多的没有实际含义的额外标签，结构化差。

父元素添加overflow

通过触发BFC达到清除浮动的效果。（p.s. 对bfc不了解可以看这篇文章）

1
2
3
.parent {
    overflow: hidden;
}

优点：代码简洁
缺点：超出的内容会被隐藏

before和after双伪元素方案

1
2
3
4
5
6
7
8
9
10
11
.clearfix:before,
.clearfix:after { 
    content:"";
    display: table;  /* 触发BFC清除浮动 */
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

优点：代码简洁
缺点：IE6-7不支持:after，需要使用 zoom: 1 触发 hasLayout

使用after伪元素（我平常使用的）

1
2
3
4
5
6
7
8
9
10
11
.clearfix::after {  
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

.clearfix {
    *zoom: 1;
}   /* IE6、7 专有 */

使用方式：给浮动元素的父元素添加一个class类：clearfix
优点：一次书写多处使用，并且符合闭合浮动思想，结构语义化正确
缺点：IE6-7不支持:after，需要使用 zoom: 1 触发 hasLayout
注意：content:"." 内容尽量不为空，可以跟一个小点，否则在firefox 7.0前的版本会生成空格

:after 和 ::after 的区别

:before、:after 在旧版本里是伪元素，CSS3的规范里 “:” 用来表示伪类，”::” 用来表示伪元素，但是在高版本浏览器下 :before、:after 会被自动识别为 ::before、::after ，这样做的目的是用来做兼容处理。

相同点

伪类对象，用来设置对象前的内容
:before 和 ::before 写法是等效的

不同点

:before 是 css2 的写法，::before 是 css3 的写法
:before 兼容性比 ::before要好

注意

伪类元素必须要配合 content 属性一起使用，否则无效
伪类元素是css渲染层加入的，不能通过js来操作