1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>清除浮动</title>
    8.     <style>
    9.         .out{
    10.             width: 800px;
    11.             border-color: darkmagenta;
    12.             border-style: solid;
    13.             border-width: 2px;
    14.         }
    15.         .daMao{
    16.             background-color:burlywood;
    17.             width: 200px;
    18.             height: 200px;
    19.             margin: 0 auto;
    20.             float: left;
    21.         }
    23.         .erMao{
    24.             background-color:cornflowerblue;
    25.             width: 200px;
    26.             height: 200px;
    27.             margin: 0 auto;
    28.             float: left;
    29.         }
    30.         .floot{
    31.             width: 800px;
    32.             height: 300px;
    33.             background-color:forestgreen;
    34.         }
    35.     </style>
    36. </head>
    37. <body>
    38.     <div class="out">
    39.         <div class="daMao">大毛</div>
    40.         <div class="erMao">二毛</div>
    41.     </div>
    42.     <div class="floot"></div>
    43. </body>
    44. </html>

    image.png
    由于大毛二毛两个盒子浮动导致两毛的父盒子高度接近于0了所以最后一个盒子（绿色盒子）没有排到两毛的下面来。