首先，先弄清楚两个概念标准流和浮动

标准流：在HTML布局里，每个盒子会各占整行位置。子盒子若是标准流，父盒子虽然没有高度，但是会撑开父盒子高度。 

浮动：盒子浮了起来，不会占据原来的位置，若父盒子没有定义高度，则不会撑开父盒子，父盒 子高度为0。直观看到的效果就是多个块级元素在一行显示，且块与块之间没有空隙，父级盒子没有高度。

示例代码：

```<div></div>```

<div class="box">

    <div class="float">I am a floated box!</div>

    <p>I am content inside the container.</p>

</div>

<style>

    .box {

        background-color: rgb(224, 206, 247);

        border: 5px solid rebeccapurple;

    }

    .float {

        float: left;

        width: 200px;

        height: 150px;

        background-color: white;

        border:1px solid black;

        padding: 10px;

    }

</style>

```

页面展示效果：

其次，为什么会浮动呢？

子盒子设置了float，导致子盒子脱离了正常的文档流，浮了起来，影响了父盒子以及兄弟盒子的布局

最后，怎么清除浮动？

改变DOM解构

不改变DOM，通过CSS清除浮动