1. 清除元素方式一

给前面一个父元素设置高度

注意点:在企业开发中，能不写高度尽量不写高度，所以这个方式不太推荐使用

2. 清除元素方式二

给后面的盒子添加clear属性
clear取值：
none:默认取值，按照浮动元素排序规则来排序
left：不要找前面的左浮动
right：不要找前面的右浮动
both：不要找前面的左浮动和右浮动

注意点：当我们给某个元素添加clear属性的之后，这个元素的margin属性会失效

3. 清除元素方式三

隔墙法

外墙法:给两个盒子中间添加块级元素并设置clear:both;
注意点：
外墙法可以让第二个盒子使用margin-top属性，但是不可以让第一个盒子使用margin-bottom属性.所以使用外墙法的时候，一般会给添加的块级元素设置高度代替margin-top和margin-bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动问题</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background: red;
            /*height: 30px;*/
        }
        .box1 p{
            background: blue;
        }
        .box2{
            background: green;
            /*clear: left;*/
            margin-top: 10px;
        }
        .box2 p{
            background: yellow;
        }
        p{
            float: left;
        }
        .clearboth{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box1">
        <p>我是段落1</p>
        <p>我是段落1</p>
        <p>我是段落1</p>
    </div>
    <div class="clearboth"></div>
    <div class="box2">
        <p>我是段落2</p>
        <p>我是段落2</p>
        <p>我是段落2</p>
    </div>
</body>
</html>

内墙法

外墙法:给第一个盒子所有子元素最后添加块级元素并设置clear:both;
注意点：
内墙法可以让第二个盒子使用margin-top属性，同时也可以让第一个盒子使用margin-bottom属性，还可以给额外添加的块级元素设置高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动问题</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background: red;
            /*height: 30px;*/
            /*margin-bottom: 10px;*/
        }
        .box1 p{
            background: blue;
        }
        .box2{
            background: green;
            /*clear: left;*/
            /*margin-top: 10px;*/
        }
        .box2 p{
            background: yellow;
        }
        p{
            float: left;
        }
        .clearboth{
            clear: both;
            height: 30px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <p>我是段落1</p>
        <p>我是段落1</p>
        <p>我是段落1</p>
        <div class="clearboth"></div>
    </div>
    
    <div class="box2">
        <p>我是段落2</p>
        <p>我是段落2</p>
        <p>我是段落2</p>
    </div>
</body>
</html>