css清除浮动的方法及原因

为什么要清除浮动

标准流 / 文档流：默认情况下，块级元素上下摆放，行内元素左右摆放。
浮动：可以脱离文档流，改变元素排列规则
清除浮动原因：
在父盒子没有设置高度的情况下，父盒子高度默认由子盒子撑开，当子盒子浮动脱离文档流不再占位后，父盒子高度会变为0。即造成了父盒子高度的塌陷。
或某个元素浮动导致它不占位，会对后续元素的排列造成影响。
所以要清除浮动

清除浮动的方法

方法1：为父元素设置高度

缺点：高度写死会导致盒子大小固定，不利于实现下拉加载数据

  <!--html-->
    <div class="father">
        <div class="son"></div>
    </div>

 /* css */ 
        .father{
            width: 300px;
            background-color: #8686ec; 
            /* 【解决】为父元素添加高度 */
            height: 100px;
        }
        .son{
            /* 子元素脱离文档流，父元素高度为0 */
            float: left; 
            width: 100px;
            height: 100px;
            background-color: #d69797;
        }

方法2：在受影响的父元素内部末尾添加块级元素-如div

缺点：当需要清除浮动的元素很多时，网页的html结构中会出现很多空的div标签，使网页结构复杂了。

    <div class="father">
        <div class="son"></div>
        <!-- 【解决】在父元素的结束标签前 添加一个块级元素 + clear:both -->
        <div class="clear"></div>
    </div>

   		.father{
            width: 300px;
            background-color: #8686ec; 
        }
    	.son{
            /* 子元素脱离文档流，父元素高度为0 */
            float: left; 
            width: 100px;
            height: 100px;
            background-color: #d69797;
        }
  		.clear{
            clear: both;
        }

方法3：伪元素清除法

原理与2类似-----相当于在父级元素的内部末尾添加了一个块级内容。

    <!-- 添加clearfix类名 -->
    <div class="father clearfix">
        <div class="son"></div>
    </div>

        .father{
            width: 300px;
            background-color: #8686ec; 
        }
        .son{
            /* 子元素脱离文档流，父元素高度为0 */
            float: left; 
            width: 100px;
            height: 100px;
            background-color: #d69797;
        }
        /* 【解决】伪元素清除浮动 */
        /* 谁要清除浮动，给谁添加clearfix类 */
        .clearfix::after{
            content:"";
            display: block;
            clear: both;
        }

方法4：给父元素设置overflow: hidden；

<div class="father">
    <div class="son"></div>
</div>

	   .father{
            width: 300px;
            background-color: #8686ec; 
            /* 【解决】为父元素添加overflow:hidden */
            overflow: hidden;
            clear: both;
        }
        .son{
            /* 子元素脱离文档流，父元素高度为0 */
            float: left; 
            width: 100px;
            height: 100px;
            background-color: #d69797;
        }

BFC解释清除浮动效果

为什么父元素的overflow: hidden;能有清除浮动效果呢？

因为 overflow:hidden;可将当前盒子变为BFC盒子

BFC概念：

块级格式化上下文(BFC)，是web页面的可视CSS渲染的一部分，是块盒子的布局过程中产生的区域。即BFC是一个区域，这个区域的一些特点，会达到清除浮动的效果。

BFC盒子的特点：

• BFC盒子会默认包裹内部的子元素，包括标准流和浮动的子元素都包括在内。
• BFC盒子本身与子元素之间不存在margin-top的塌陷问题。

创建BFC盒子的其他方法：

• 添加浮动的元素是BFC盒子
• 行内块级元素是BFC盒子
• overflow属性不取visible时，都是BFC盒子

/* 创建BFC盒子的其他方法---把father盒子变为BFC盒子*/
.father{
	/*方法1*/
	float: left;
	/*方法2*/
	display: inline-block;
	/*方法3*/
	overflow: hidden;
}