轻松搞懂CSS浮动与清除浮动图文详解

1. 什么是浮动

CSS中的浮动（float），顾名思义就是使元素在文档中根据左右方向的要求浮动。使用浮动可以实现多栏布局，图文混排等效果。

2. 如何设置浮动

使用CSS的float属性可以让元素进行浮动，具体语法如下：

float: none | left | right;

其中none代表取消浮动，left代表向左浮动，right则是向右浮动。

2.1 单独设置浮动

比如下面的代码设置了一个向左浮动的div元素：

<div style="float: left;">浮动元素</div>
<p>普通元素</p>

设置后，页面上会显示左侧浮动元素向左浮动，右侧普通元素紧跟其后。

2.2 多列布局

使用浮动可以很容易地实现多列布局，代码如下：

<div class="nav">导航栏</div>
<div class="main">主要内容</div>
<div class="sidebar">侧边栏</div>

.nav{
    float: left;
    width: 200px;
}
.main{
    float: left;
    width: 500px;
    margin-left: 20px;
}
.sidebar{
    float: left;
    width: 200px;
}

使用上述代码可以将网页分为三列，其中左侧导航栏向左浮动，中间主要内容和右侧侧边栏浮动，且主要内容与侧边栏之间有20px的间距。

3. 浮动的问题

浮动的使用方便，但也存在很多问题，例如浮动元素的高度无法被父元素撑开、外边距传递等等。

3.1 高度无法被撑开

当父元素中的子元素全部被设置为浮动时，父元素的高度会丢失。解决办法有两种：

• 运用:after伪元素，如下：

.parent:after{
    content: "";
    display: block;
    clear: both;
}

• 触发父元素BFC，如下：

.parent{
    overflow: hidden;
}

3.2 外边距传递

当浮动元素前后有元素分别设置了上下边距时，边距有可能会传递给浮动元素上。解决办法有两种：

• 运用clear属性，如下：

.clear{
    clear: both;
}

• 运用变相的撑开方式，如下：

.margin{
    margin-bottom: 1px;
}
.margin:last-child{
    margin-bottom: 0px;
}

4. 清除浮动

因为浮动可能会引发上述问题，因此需要清除浮动。

4.1 clear属性

使用clear属性可以清除浮动，其语法如下：

clear: none | left | right | both;

其中none代表不清除，left和right分别代表左浮动和右浮动的元素会被清除，both代表所有的浮动元素均会被清除。

4.2 父元素触发BFC

因为触发BFC后能够包含浮动元素，因此也可以通过触发父元素BFC的方法来清除浮动，如第3.1点中的解决方式。

5. 总结

本文详细介绍了浮动的使用方法和存在的问题，以及清除浮动的两种方式。希望能够帮助读者顺利使用浮动实现各类布局效果。