1.浮动种类
(1) 左浮动 float: left;
(2) 右浮动 float: right;
2.为什么要清除浮动?
当我们给一个元素加了浮动之后，这个元素就脱离了标准流，我们都知道脱离了标准流的元素是不占位置的，那么它的后面的元素就会占用它之前的位置，打乱了我们原先的布局，这个时候我们就需要清除浮动了。
例如：
HTML代码：
<div class="father clearfix">
<div class="son"></div>
</div>
<div class="demo1"></div>
CSS代码：
.son {
width: 200px;
height: 200px;
background-color: lightcoral;
float: left;
/*左浮动*/
}
.demo1 {
width: 300px;
height: 300px;
background-color: rgb(128, 236, 240);
}
3.清除浮动方法
(1) 触发父元素的BFC
HTML代码:
CSS代码:
注意：标深的代码就是出发父元素的BFC的代码。
结果：
(2) 在需要清除浮动的元素后面加一个空div，并且给这个div清除浮动。
HTML代码:
CSS代码:
(3) 伪类清除浮动
HTML代码:
注意: 要给需要清除浮动的元素加上clearfix这个类名。
CSS代码:
(4) 双伪类清除浮动
HTML代码:
CSS代码:
4.四种方法的使用情况
(1) 第一种方式会隐藏掉超出的部分，偶尔使用；
(2) 第二种方式添加了一个多余的div，基本不用；
(3) 第三种没有添加多余的东西，比较常用；
(4) 第四种方式比较麻烦，基本不用。
总结就到这里，希望大家多多关注，会持续更新小知识哦 (*^▽^*)。
