一、浮动的核心

开始的 flot 只是一种布局方式，但浮动的元素会脱离文档流；会导致父元素高度塌陷，所以才需要清除浮动。

1、浮动元素会变成行内块元素。

MDN [解释](developer.mozilla.org/zh-CN/docs/…)

如下图：父元素产生高度塌陷

如下图：基本浮动效果

注：浮动元素的 margin border 任然有效

二、清除浮动

1、浮动元素最后加空 div 加 clear

 <div class="box">
        <div class="box1">box1</div><!-- float: left; -->
        <div class="box2">box2</div><!-- float: left; -->
        <div style="clear: both/left"></div>
  </div>

2、BFC 清除浮动

BFC 就是父元素和浮动的子元素一起称为 BFC（块格式化上下文），让整块区域不影响前后的布局。

.box::after{
        content: '';
        display: table;
        clear: both/left;
    }
<div class="box">
        <div class="box1">box1</div><!-- float: left; -->
        <div class="box2">box2</div><!-- float: left; -->
</div>

3、父元素加 overflow 清除浮动

.box {
        width: 500px;
        background-color: antiquewhite;
        overflow: auto;
    }
<div class="box">
        <div class="box1">box1</div><!-- float: left; -->
        <div class="box2">box2</div><!-- float: left; -->
</div>

4、父元素加 inline-block 清除浮动

.box {
        width: 500px;
        background-color: antiquewhite;
        display：inline-block;
    }
<div class="box">
        <div class="box1">box1</div><!-- float: left; -->
        <div class="box2">box2</div><!-- float: left; -->
</div>

本文仅个人理解，如有不对的地方希望大佬们指正