在前端开发中，使用float浮动常常让几个快级元素一行排列，不过浮动后会出现高度塌陷问题，以下是解决浮动带来的高度塌陷的问题。建议使用的清除浮动的四种方法。

如下图所视，子元素使用浮动后，父元素没被撑开。

<div class="box">
        <div>盒子1</div>
        <div>盒子2</div>
        <div>盒子3</div>
    </div>
*{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .box{
            width: 1200px;
            border: 1px solid red;
        }
        .box>div{
            width: 150px;
            height: 100px;
            border: 1px solid blue;
            text-align: center;
            line-height: 100px;
            float: left;
        }

vwwCUx.png

方法一

给父级元素添加高度

*{
           margin: 0;
           padding: 0;
           box-sizing: border-box;
       }
       .box{
           width: 1200px;
           height: 200px;
           border: 1px solid red;
       }
       .box>div{
           width: 150px;
           height: 100px;
           border: 1px solid blue;
           text-align: center;
           line-height: 100px;
           float: left;
       }

vw0lwR.png

方法二

给父级元素添加overflow: hidden;或者overflow: auto; ，跟随子元素的高度

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏
建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

*{
           margin: 0;
           padding: 0;
           box-sizing: border-box;
       }
       .box{
           width: 1200px;
           border: 1px solid red;
           overflow: hidden;
       }
       .box>div{
           width: 150px;
           height: 100px;
           border: 1px solid blue;
           text-align: center;
           line-height: 100px;
           float: left;
           margin-right: 10px;
       }

方法三

在需要清除浮动的后面添加一个空盒子，使用 clear: both;清除浮动。不建议使用。

优点：简单，代码少，浏览器兼容性好。
缺点：需要添加大量无语义的 html元素，代码不够优雅，后期不容易维护。

<div class="box">
       <div class="sm">盒子1</div>
       <div class="sm">盒子2</div>
       <div class="sm">盒子3</div>
       <div class="clear"></div>

   </div>
*{
           margin: 0;
           padding: 0;
           box-sizing: border-box;
       }
       .box{
           width: 600px;
           border: 1px solid red;

       }
       .sm{
           width: 150px;
           height: 100px;
           border: 1px solid blue;
           text-align: center;
           line-height: 100px;
           float: left;
           margin-right: 10px;
       }
      .clear{
       clear: both;
      }

vwrXng.png

方法四

给父级div定义 伪类:after

*{
           margin: 0;
           padding: 0;
           box-sizing: border-box;
       }
       .box{
           width: 600px;
           border: 1px solid red;

       }
       .box::after{
           /* 必须写 */
           content: "";
           display: block;
           clear: both;


           /* 写不写无所谓 */
           /* visibility: hidden;
           height: 0; */
       }
       .sm{
           width: 150px;
           height: 100px;
           border: 1px solid blue;
           text-align: center;
           line-height: 100px;
           float: left;
           margin-right: 10px;
       }

vwrXng.png