給li設置float浮動屬性以後，沒法撐開外層ul的問題。

時間 2019-11-17

標籤設置 float 浮動屬性以後沒法撐開外層問題欄目 CSS 简体版

原文原文鏈接

最近在項目中有好幾回遇到這個問題，感受是浮動引發的，雖然用<div style="clear:both"></div>解決了，但本身不是特別明白，又在網上查了相關內容，是由於給li設置了浮動以後它就脫離當前正常的文檔流，因此沒辦法撐開外層ul的高度。css

如下面代碼爲例，其實有好幾種解決方法，我用的這種並非最簡單的。html

<!DOCTYPE html >
<html >
<head>
<meta charset="utf-8">
<title>給li設置float浮動屬性以後，沒法撐開外層ul的問題。</title>
<style type="text/css">
ul{
   border: 1px solid #000;
   width: 200px;
   height: auto;
   margin-top: 100px;
}
li{
   float: left;
   list-style: none;
   margin-left: 10px;
}
</style>
<body>
<ul>
   <li>星期一</li>
   <li>星期二</li>
   <li>星期三</li>
   <li>星期四</li>
   <li>星期五</li>
   <li>星期六</li>
   <li>星期天</li>
</ul>
</body>
</html>佈局

以上代碼顯示結果如圖，ul的邊框變成了一條線，沒有被撐開，；spa

但是我指望的效果是這樣的：。htm

若是ul裏邊的內容是固定的，給ul加上高度就能夠解決問題，可是遇到的項目中li是動態生成的，個數不能肯定，因此高度只能設置成auto，這時候其實只要給外層ul也加上浮動屬性就能夠解決問題，但有時候佈局會受到影響，只能根據狀況而定；另外給ul加上overflow:auto/hidden也能夠解決問題，若是要兼容ie6，後面加上"zoom:1"或者"width:100%"便可。blog

最後再總結一下，總共有4種方法：utf-8

第1種方法：在html代碼裏邊給最後一個li後面加空元素清除浮動，div能夠換成p或者其餘。具體以下圖:文檔

第2種方法：給ul設置固定的高度。具體以下圖:it

第3種方法：給ul設置overflow屬性，也能夠是overflow:hidden。具體以下圖:meta

第4種方法：給ul加浮動屬性，能夠換成float:right，可是頗有可能佈局就會收到影響。具體以下圖:

每一個人用的方法應該都不同，我以爲第三種方法最簡單，之後就用這種。哈哈，這會下班回家~~