css之清除浮动

1.什么是浮动？

当给盒子添加：float属性时，盒子会脱离正常的文档流。帮助我们进行页面布局。

清除浮动的本质是？

在复杂的页面布局中，盒子大小有时候不适合写死，内容多父级盒子会被撑开。所以不设置父级盒子的大小，父盒子是没有高度的，但是子级盒子浮动之后，父级盒子会缩小（子级盒子是浮动在父级盒子之上，不占位置），会影响下面正常的文档流的位置。所以要清除浮动。

本质：清除浮动元素脱离标准流造成的影响。

清除浮动元素策略：闭合浮动。只让浮动在父盒子内部影响，不影响父盒子外部其他盒子的布局。

2.清除浮动的方法

1）额外标签法

给浮动标签的最后一个标签末尾添加一个空标签:添加属性clear

.clear{
    clear:both;
}

<div class='box'>
    <div class='box1'></div>
    <div class='box2'></div>
    <div class='clear'></div>
</div>

缺点：添加了很多无意义的标签，结构性差。

2）给父级元素添加overflow：属性值：hidden、auto、scroll

.box{
    overflow：hidden;
}

<div class='box'>
    <div class='box1'></div>
    <div class='box2'></div>
</div>

缺点：无法显示溢出的部分

优点：代码简洁

3）给父级元素添加 ：after伪元素

.clearfix:after{
   content:'';
   display:block;
   height:0;
   clear:both;
   visibility:hidden;
 
//照顾低版本的浏览器
 .clearfix{
     *zoom:1;

.box{
    overflow：hidden;
}

<div class='box clearfix'>
    <div class='box1'></div>
    <div class='box2'></div>
</div>

4）给父级元素添加双伪元素：before ：after

.clearfix:before，
.clearfix:after{
   content:'';
   display:table;
   
 }
.clearfix:after{
    clear:both;
}
//照顾低版本的浏览器
 .clearfix{
     *zoom:1;

.box{
    overflow：hidden;
}

<div class='box clearfix'>
    <div class='box1'></div>
    <div class='box2'></div>
</div>

优点：代码更简洁

缺点：照顾低版本