产生浮动的原因：一般都是一个盒子里使用了CSS的float浮动属性，导致父级对象盒子不能被撑开

    1. <style>
    2.   .fu {
    3.     width: 200px;
    4.     border: 1px solid black;
    5.   }
    6.   .zi {
    7.     width: 120px;
    8.     height: 120px;
    9.     border: 1px solid red;
    10.     line-height: 120px;
    11.     text-align: center;
    12.     float: right;
    13.   }
    14. </style>
    16. <body>
    17.   <div class="fu">
    18.     <div class="zi">子元素</div>
    19.   </div>
    20. </body>

    35E44EFB-8EAA-4e27-BFF8-1FD49621C083.png
    清除浮动的方法：

    1. 在结尾处添加空div标签并给该标签添加clear:both样式 ```html

    子元素

    2. 2. 给父级添加伪元素::after
    3. ```html
    4. <style>
    5.   .fu {
    6.     width: 200px;
    7.     border: 1px solid black;
    8.   }
    9.   .zi {
    10.     width: 120px;
    11.     height: 120px;
    12.     border: 1px solid red;
    13.     line-height: 120px;
    14.     text-align: center;
    15.     float: right;
    16.   }
    17.   .clearfix:after {
    18.     content: '';
    19.     display: table;
    20.     clear: both
    21.   }
    22.   .clearfix {
    23.     *zoom: 1;
    24.   }
    25. </style>
    27. <body>
    28.   <div class="fu clearfix">
    29.     <div class="zi">子元素</div>
    30.   </div>
    31. </body>
    1. 给父级添加overflow:hidden或overflow:auto ```html

    子元素
    ```