有些场景不适合设置高度。

但是如果父元素不设置高度，子元素都浮动，那么父元素的高度就是0，因为浮动元素不占用位置的。

为什么清除浮动

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

清除浮动本质

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

clear: both\left\right;

清除浮动方法

1.额外标签法也称为隔墙法，是W3C推荐的做法。

<div class="box1">// 不设置高度
    <div class="box2">2</div>// 浮动
    <div class="box3">3</div>// 浮动
    <div class="clear"></div>// .clear {clear: both}
</div>

<div class="box4">// 浮动
    4
</div>

但这种是无意义的添加新元素，后期可能看不懂；这个新增盒子要求必须是块级元素，不能是行内元素
2.父级添加overflow属性
给父元素添加overflow: hidden,auto,scroll
3.父级添加:after伪元素
给父元素添加

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

4.父级添加双伪元素

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

.clearfix:after {
    clear: both;
}