html:
    代码：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Document</title>
    7.     <link rel="stylesheet" href="../css/reset.css">
    8.     <link rel="stylesheet" href="../css/66clear.css">
    9. </head>
    10. <body>
    11.     <div class="d1">1</div>
    12.     <div class="d2">2</div>
    13.     <div class="d3">3</div>
    14. </body>
    15. </html>

    css:
    （1）当两个块上下对齐时，上面那个块设置为float,那么下面会移动上面去
    （2）为了消除这种影响，使用clear; 使得下面那个块不受float的影响。 具体的作用是，浏览器会自动设置下面块的 margin-top: x;x等于上面块的总高度
    （3）clear: left; right; both; both是指，取当前所有float块最大的总高度为值，设置margin-top;

    代码：

    .d1 {
    width: 300px;
    height: 300px;
    font-size: 30px;
    background-color: pink;
    float: left;
}

.d2 {
    width: 500px;
    height: 500px;
    background-color: royalblue;
    float: right;
}

.d3 { 
    font-size: 30px;
    width: 300px;
    height: 300px;
    background-color: rebeccapurple;
    clear: both;
}

    效果
    image.png