CSS 清除浮动

清除浮动的方法：

1. 给浮动元素的父元素设置高度：

   <div class="container">
   	<div class="float"></div>
   </div>
   

   .container {
     height: 200px; /* 设置明确高度 */
   }
   .float {
     float: left;
   }
   

2. 给最后一个浮动元素后添加额外标签来清理浮动。 （ 建议不要为了清除浮动专门添加元素，会产生冗余元素）

   <div class="container">
     <div class="float"></div>
     <div class="clear"></div>
   </div>
   

   .float {
     float: left;
   }
   .clear {
     clear: both;
   }
   

3. 后伪元素清除浮动（推荐）。

   <div class="container">
     <div class="float"></div>
   </div>
   

   .container::after {
     content: '';
     display: block;
     clear: both;
   }
   

   通过后伪元素清除浮动，不会产生冗余DOM。

4. 创建父级BFC （给父级元素定义overflow: hidden）