CSS清除浮动的方法以及优缺点

CSS清除浮动的方法以及优缺点

1. height：父元素设置高度

   原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
   优点：简单、代码少、容易掌握
   缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
   建议：不推荐使用，只建议高度固定的布局时使用

   /* 高度清除浮动 */
     div{
          
         height: 300px;
     }
   

2. clear:both;: 父元素内尾部加额外块标签，并设置clear:both
   原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
   优点：简单、代码少、浏览器支持好、不容易出现怪问题
   缺点：为了清除浮动，额外增加一个块级标签

   /*结尾处添加空的div*/
       .div{
          
           clear:both;
           height:0;
           overflow:hidden;
       }  
   

3. overflow:hidden：利用bfc原理来清除浮动
   原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
   优点：简单、代码少、浏览器支持好
   缺点：清除浮动非常简单，但是会溢出隐藏。

   /* 利用bfc机制清除浮动 */
   	ul{
          
   	    overflow: hidden;
   	}
   

4. ::after：使用伪类清除浮动
   优点 ：不需要额外增加标签，也不会导致溢出隐藏，
   缺点：但代码实习有些多，E8以上和非IE浏览器才支持:after

   /* 伪类清除浮动 */
   	ul::after{
          
   	    display: block;
   	    content: " ";
   	    clear: both;
   	    font-size: 0;
   	    visibility: hidden;
   	    height: 0;
   	    line-height: 0;
   	}
   

5. overflow:auto
   原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度
   优点：简单、代码少、浏览器支持好
   缺点：内部宽高超过父级div时，会出现滚动条。

   	div{
          
       /*overflow：auto清除浮动*/
       overflow: auto;
   } 
   

6. 父级div 也一起浮动
   原理：所有代码一起浮动，就变成了一个整体
   优点：没有优点
   缺点：会产生新的浮动问题

       <style type="text/css"> 
           .div1{
           
           background:#000;
           width:60%;
           float:left
           } 
           .div2{
           
           background:#000;
           height:100px;
           width:100%;
           clear:both} 
           .left{
           
           float:left;
           width:20%;
           height:200px;
           background:red;
           } 
       style> 
           <div class="div1"> 
               <div class="left">Leftdiv> 
           div> 
           <div class="div2"> 
               div2 
           div>
   

7. 父级div定义 display:table
   原理：将div属性变成表格
   优点：没有优点
   缺点：会产生新的未知问题

    .div{
          
   	display:table
   } 
   

8. 结尾处加 br标签 clear:both
   原理：父级div定义zoom:1来解决IE浮动问题，结尾处加 br标签 clear:both

   div{
          
   	zoom:1;
   }
   br{
          
   clear:both;
   }