css-浮动(清除浮动)

清除浮动

1.为什么需要清除浮动？

原因：由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子

2.清除浮动的本质

清除浮动的本质清除浮动盒子造成的影响(即不会撑开父盒子)

• 若是父盒子本身存在高度，则不需要清除浮动；
• 清除浮动后，父级就会根据浮动的子盒子自动检测高度，不会影响后面的标准流了；

3.注意点：

浮动只会影响其后面的标准流并不会影响其前面的标准流；

4.语法

// 清除浮动造成的影响
选择器{
    clear:both
}

5.清除浮动的方式

[1]额外标签法

• 额外标签法也称为隔墙法，是 W3C 推荐的做法；
• 使用方式：在浮动元素 末尾 添加一个空标签(这个空标签为块级元素)，设置样式clear:both

  • <div style='clear:both'></div>

•  优点：通俗易懂
• 缺点： 添加许多无意义的标签，结构化较差

[2]父元素添加overflow属性

• 给父元素添加overflow属性，属性值可以为hidden、scroll、auto;
• 原理：启动父元素的BFC
  • BFC元素在计算高度时会将浮动元素的高度计算在内；

[3]父级添加after伪元素(常用)

• 给父元素添加after伪元素是额外标签法的升级版
• 语法加原理

  • .clearfix:after{
        content:''; // 伪元素必须有的属性，
        display:block;// 伪元素是行内元素，额外标签法需要添加块级元素，需要转化
        clear:both; // 清楚浮动代码
        height:0;// 隐藏此元素，
        visibility:hidden; // 隐藏此元素
    }
    
    .clearfix{
        *zoom:1; //兼容性
    }

[4]父级添加双伪元素

.clearfix:before,.clearfix:after {
   content:"";
   display:table; 
 }
 .clearfix:after {
   clear:both;
 }
 .clearfix {
    *zoom:1;
 }