清除浮動的方法

一、準備

<!DOCTYPE html><html lang="en">
<head>    
    <meta charset="UTF-8">    
    <title>Title</title>    <style>        
    ul {            
          border: dotted red 1px;            
          display: block;   
      }        
      li{            
          border: dotted blue 1px;            
          float: left;            
          list-style: none;        
        }        
       .content{            
          border: dotted green 1px;        
        }        
      .box{            
            border: dotted black 1px;        
       }    
        </style>
</head>
<body>    
      <div class="content">        
            <ul>            
                <li>a</li>            
                <li>b</li>            
                <li>c</li>            
                <li>d</li>            
                <li>e</li>            
                <li style="">asda</li>        
            </ul>        
            <div class="box">            
                <h1>阿菲是個小乖乖</h1>        
            </div>    
        </div>
</body>
</html>

方法1. clearfix(一)

定義

   .clearfix{            
          overflow: auto;            
          height: 1%;       
      }

ul添加clearfix

方法2. clearfix(二)

      .clearfix{            
          overflow: hidden;            
          zoom: 1;       
      }

方法3. clearfix(三) 推薦 

.clearfix:after{    
    content:".";    
    display:block;    
    height:0;    
    clear:both;    
    visibility:hidden
}
.clearfix{
    height:1%;
}

方法4. 給ul添加overflow:hidden屬性

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容