1.浮动（float）的元素特征

• 脱离标准流的控制（浮）移动到指定位置（动），俗称脱标）
• 浮动的盒子不在保留原先的位置

left 左浮动 right 右浮动

• 浮动元素会脱离标准流简称（脱标）在标准流中不占位置。
• 浮动元素比标准流高半个级别，可以覆盖标准流中的元素。
  * 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动。
• 浮动元素会受到上面元素边界的影响。
• 浮动的特点：一行显示多个 可以设置宽高

注意：

• 浮动元素不能通过 text-align:center或 margin:0 auto;让浮动本身元素水平居中

清除浮动

1.直接给父元素高度

优点：简单粗暴，方便

缺点：有些布局中不能固定父元素高度，如：新闻列表，京东推荐模块

2.额外标签法

操作：

在父元素内容的最后加一个块级元素

给添加的块级元素设置 clear:both

<style>
    .clear {
        clear: both;
    }
</style>

<div slass="clear"></div>

缺点：会在页面添加额外的标签，会让页面的 HTML 结构变得复杂

3.单伪元素清除法

操作：用伪元素代替了额外标签

基本写法

.clearfix::after{    
/*伪元素必加条件*/                
content: ' ';    
/*转换为块级元素*/            
display: block;    
/*清除浮动*/            
clear: both;    
/*补充写法：在网页中看不到伪元素*/            
height: 0;
/*隐藏元素占位置*/
visibility: hidden;
}
/*兼容性*/
.clearfix {
*zoom: 1;
}

优点：直接给要清除的元素加类就行

4双伪元素清除法

操作：

.clearfix::backdrop,    
.clearfix::after {    
/*转换为块级元素*/
content: '';    
/*转换为块级元素*/    
display: table;    
}                
.clearfix::after {    
/*清除浮动*/
clear: both;        
}    
/*兼容性*/
.clearfix {
*zoom: 1;
}

优点：项目中使用，直接给标签加类即可清除浮动。

5.清楚浮动(overflow）

给父元素添加overflow属性，将属性值设置为hidden ， auto， 或scroll

<style>
    .box {
        overflow: hidden;
    }
</style>

优点：使用方便。