css浮动布局清除浮动

【浮动定义】

1. 浮动元素会脱离标准流（脱标）。

2. 浮动会一行内显示，并和其他元素对齐，在以下空间中。

3. 浮动元素会具有行内块元素的特性，都加了浮动，可以在一行并排显示。

4. 加了浮动盒子会飞，下面的盒子就会占有会飞盒子的位置，继而加浮动的盒子会压住下面的盒子

5. 两个盒子加了浮动都会飞，那就顶端进行一行排序（父元素一定要有宽高）

6. 行内块加上浮动，他就具有行内块元素特质。

7. 加上浮动的元素，没有设置宽度，是根据你内容多少来决定宽度的。

8. 加了浮动是没有缝隙的

9. 浮动只会影响下面的元素浮动

10. 浮动元素经常和父级元素搭配使用

11. 标准流父盒子 > 子元素加浮动 > 先准备一个大盒子居中，在准备几个浮动子元素对齐

12. ul 做大盒子，li做小盒子

【浮动css写法】

.fl {
float: left;
}

.fr {
float: right;
}

清除浮动

推荐伪元素清除浮动（推荐）

.clearfix::before,
.clearfix::after {
content: "";
display: table;
}

.clearfix::after {
clear: both;
}

.clearfix {
*zoom: 1;
}
/*父级太添加伪元素*/

百度清楚浮动的样式

.clearfix::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix::after {
*zoom: 1;
}
/*父级太添加伪元素*/

多余的部分会被切掉

overflow: hidden;
/*父级添加代码*/