清除浮动

含义："清除浮动带来的影响"

• 影响：如果子元素浮动了，子元素现在不能撑开标准流的块级父元素

原因：

• 子元素浮动后脱标 -> 不占位置

目的:

• 需要父元素有高度，从而不影响网页其他元素的布局

清除浮动的方法

1. 直接设置父元素高度

2. 额外标签法

   • 操作
     1. 在父元素的最后添加一个块级元素
     2. 给添加的块级元素设置clear:both
   • 特点
     1. 缺点：会增加额外html标签，使得页面更复杂

3. 单伪元素清除法

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

     一. 基本写法

     .clearfix::after{
         content:'';
         display:block;
         clear:both
     }
     

     二.补充写法

     .clearfix::after{
         content:'';
         display:block;
         clear:both
         /*补充代码：在网页中看不到伪元素*/
         height:0;
         visibility:hidden;
     }
     

   • 特点：

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

4. 双伪元素清除法

   • 操作：

     .clearfix::before,
     .clearfix::after{
        content : '';
        display : table;
     }
     .clearfix::after{
        clear:both;
     }
     

   • 特点：

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

5. 给父元素设置overflow:hidden

   • 操作:直接设置
   • 特点:方便

BFC

是Web页面的可视化CSS的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域

1. 创建BFC的方法

   • HTML标签是BFC盒子

   • 浮动元素是BFC盒子

   • 行内块元素是BFC盒子

2. BFC盒子常见特点

   • 会默认包裹住子元素 应用：清除浮动
   • BFC本身和子元素中间不存在marjin的塌陷现象