常见CSS属性（二）—

一、浮动简述

浏览器在解析html文档时，正常的顺序是从上往下、从左往右解析。这个正常的解析过程，叫做正常文档流(标准文档流)，而浮动就是使得元素脱离文档流，“浮”在浏览器上。

浮动会使元素脱离文档流，不占位置，在需要多个元素在同一行时，设置元素靠左或者靠右摆放，可以使用浮动，但使用浮动时，需要清除浮动，以免影响后续的元素。

浮动的写法如下：

css"><style>.fl {float: left;}.fr {float: right;}
</style>

二、设置浮动

假设现在有三个盒子，当他们正常渲染的时候，是从上往下摆放的，如下：

此时的代码如下：

<body><style>.box {width: 100px;height: 100px;}.box-1 {background-color: red;}.box-2 {background-color: pink;}.box-3 {background-color: skyblue;}</style><div class="box box-1"></div><div class="box box-2"></div><div class="box box-3"></div>
</body>

如果我们希望三个盒子在同一行，可以设置浮动，代码如下：

<body><style>.box {width: 100px;height: 100px;float: left;}.box-1 {background-color: red;}.box-2 {background-color: pink;}.box-3 {background-color: skyblue;}</style><div class="box box-1"></div><div class="box box-2"></div><div class="box box-3"></div>
</body>

效果如下：

此时如果再放其他的元素，会被覆盖，假设我们放其他的盒子，代码如下：

<body><style>.box {width: 100px;height: 100px;float: left;}.box-1 {background-color: red;}.box-2 {background-color: pink;}.box-3 {background-color: skyblue;}.box-4 {width: 200px;height: 200px;background-color: palegreen;}</style><div class="box box-1"></div><div class="box box-2"></div><div class="box box-3"></div><div class="box-4"></div>
</body>

效果如下，我们发现第四个盒子的一部分被覆盖了，这是因为我们设置了浮动，上面的三个盒子脱离文档流，不占位置了，此时我们需要清除浮动，防止影响浮动后续的元素。

三、清除浮动

使用类名选择器清除浮动

我们设置一个类clear，添加clear: both;属性，并把类名给第四个盒子（后续元素）就可以清除浮动，代码如下：

<body><style>.box {width: 100px;height: 100px;float: left;}.box-1 {background-color: red;}.box-2 {background-color: pink;}.box-3 {background-color: skyblue;}.box-4 {width: 200px;height: 200px;background-color: palegreen;}.clear {clear: both;}</style><div class="box box-1"></div><div class="box box-2"></div><div class="box box-3"></div><div class="clear box-4"></div>
</body>

或者设置块元素用于清除浮动，添加一个div并添加类名clear，代码如下：

<body><style>.box {width: 100px;height: 100px;float: left;}.box-1 {background-color: red;}.box-2 {background-color: pink;}.box-3 {background-color: skyblue;}.box-4 {width: 200px;height: 200px;background-color: palegreen;}.clear {clear: both;}</style><div class="box box-1"></div><div class="box box-2"></div><div class="box box-3"></div><div class="clear"></div><div class="box-4"></div>
</body>

效果如下，此时第四个盒子就不会被浮动的前三个盒子覆盖了。

设置伪类元素清除浮动

还可以使用伪类元素清除浮动，设置伪类元素clearfix。

css">/* 使用伪类元素清除浮动 */
.clearfix::after {/* 生成伪类元素属于行内元素 */content: "";/* 把行内元素转成块元素 */display: block;/* 清除浮动 */clear: both;
}

如果需要清除浮动，只需要给浮动的父元素添加这个属性就可以了，代码如下：

<div class="parent clearfix"><div class="child bg-pink"></div><div class="child bg-orange"></div>
</div>