css中的浮动以及清除

1. 浮动的概念

浮动是网页布局中最古老的方式，但是这种方式最开始并不是为了网页布局而生的。浮动是为了让文字环绕图片而生的。在css中，浮动是通过float属性来实现的，float属性有left和right两个值，分别表示向左浮动和向右浮动。正是因为浮动并不是为网页布局而生的，导致我们在后面在使用的时候会有很多出乎意料的方式。

1.1 浮动的使用

浮动的使用非常简单，只需要给需要浮动的元素设置float属性即可。例如：

<div class = "bigBox">
    123
    <div class="box">我是一个盒子</div>
</div>
复制代码

.bigBox{
    background-color: #ccc;
}
.box {
    width: 100px;
    height: 100px;
    float: left;
}
复制代码

上面的代码块就应用了浮动的特性，我们将此盒子向左浮动了，这样盒子就会向左浮动，而且盒子的宽度会自动变成内容的宽度。

但是在这里我们发现一个问题，就是在外部盒子的高度没有将我们浮动的盒子包含进去。

这是为什么呢？这是因为浮动的元素脱离了文档流，所以在文档流中的元素不会将浮动的元素包含进去。

下面我们使用清除浮动来解决这个问题。

2.清除浮动

2.1 清除浮动的概念

清除浮动就是将浮动脱离标准文档流导致的高度塌陷问题解决掉。比如上面的例子，我们通过清除浮动，使得外部的盒子可以将浮动的元素包含进去。

清除浮动是为了解决浮动元素脱离文档流导致的高度塌陷问题。清除浮动的方式有很多，但是最常用的就是使用clear属性和伪元素来清除浮动。

2.2 clear清除浮动

clear属性是用来清除浮动的，它有四个值，分别是left、right、both、none。其中left和right分别表示清除左浮动和右浮动，both表示清除左右浮动，none表示不清除浮动。

那么如何来使用呢？

• 在装浮动元素的盒子上使用clear属性，例如：

<div class = "bigBox">
    123
    <div class="box">我是一个盒子</div>
    <div style="clear:both;">我是一个盒子</div>
</div>
复制代码

在这里我们默认浮动的元素是向左浮动的，所以我们在装浮动元素的盒子上使用clear:both;来清除浮动。

虽然这样可以达到清除浮动的效果，但是这样很不优雅，尤其是在我们实际开发当中，我们需要将html和css分离开来；如果我们将css写在html中，会导致我们的html代码变得很臃肿。

这个时候，就需要用到第二种清除浮动的方式，利用伪元素。

2.3 伪元素清除浮动

伪元素是一种特殊的选择器，它可以用来选择一些不存在的元素，比如：before、after、first-letter、first-line等。伪元素以::开头，但是后面为了更好的兼容性，我们习惯使用:开头。

在这里我们使用到:after和:before，表示在元素的结束和开始处插入一个元素。

于是，上面的清除浮动，我们可以这样写：

.bigBox:after {
    content: "";// 这里必须要有内容，否则不会生效（必须要有content）
    display: block;// 这里设置为非inline元素，否则不会生效
    clear: both;
}