CSS-清除浮动

为什么要清除浮动

由于父盒子在很多情况下，不方便给高度，但子盒子浮动后又不占又位置，因此需要清除浮动防止父元素高度塌陷
 

清除浮动的本质

• 清除浮动的本质是清除浮动元素造成的影响
• 如果父盒子本身有高度，则不需要清除浮动
• 清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了
   

清除浮动的策略

• 闭合浮动，只会让浮动在父盒子内部影响，不影响父盒子外部的其他盒子
   

清除浮动的四种方法

1.额外标签法或隔墙法,（新增加的盒子必须是块级元素）

		.box1 {
            border: 1px solid green;
        }

        .fl {
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
        }

        
        .fr {
            float: right;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        
        .clear{
        	clear:both;
        }

		<div class="box1">
        	<div class="fl">1</div>
       	 	<div class="fr">2</div>
       		 <!-- 新增加的盒子必须要求是块级元素 -->
        	<div class="clear"></div>
    	</div>

2.父级添加overflow属性

优点：代码简洁
缺点：无法显示溢出部分

	.box2 {
            /* 清除浮动 */
            overflow: hidden;
            border: 1px solid green;
        }

	<div class="box2">
        <div class="fl">1</div>
        <div class="fr">2</div>
    </div>

此方法触发了BFC

什么是BFC

BFC(Block Formatting Context) 块级格式化环境
BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC，开启BFC该元素会变成一个独立的布局区域

元素开启BFC的特点：
1.开启BFC的元素不会被浮动元素所覆盖
2.开启BFC的元素子元素和父元素外边距不会重叠
3.开启BFC的元素可以包含浮动的子元素

可以通过一些特殊方式来开启元素的BFC:
1.设置元素的浮动(不推荐)
2.将元素设置为行内块元素(不推荐)
3.将元素的overflow设置为一个非visible的值
常用的方式为元素设置 overflow:hidden; 以开启其BFC,使其开启包含浮动元素,防止高度塌陷

3.父级添加after伪元素

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

       	<div class="box3 clearfix">
        <div class="fl">1</div>
        <div class="fr">2</div>
    </div>

4、父级添加双伪元素（clearfix这个样式可以同时解决高度塌陷和外边距重叠的问题）

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

    .clearfix:after {
            clear: both;
        }

    <div class="box4 clearfix">
     	<div class="fl">1</div>
       	<div class="fr">2</div>
    </div>