關於CSS浮動的困惑

我對浮動有點困惑。我已經創建了一個float的例子。 http://jsbin.com/pasavifego/edit?html,css,js,output 關於CSS浮動的困惑

我已經給出了我的ul的背景顏色爲紅色。

我所有的li都向左浮動，我現在沒有看到任何背景顏色。如果我刪除它正在工作的浮動。有人能解釋爲什麼發生這種情況

另一個問題是，當一個div是float：left，當我添加另一個div時，爲什麼它會在該div旁邊開始。

有人可以解釋一下。

感謝

來源

2016-09-06 Sahithi

因爲當您將某些東西從文檔流中移除時。在你的情況下，ul崩潰，因爲它沒有看到任何li元素。閱讀https://developer.mozilla.org/en-US/docs/Web/CSS/float – j08691

是的，所有的li都是左移的，但它們都在ul內。所以，UI可以看到li元素，那麼爲什麼不呢背景變成紅色 – Sahithi

__ **因爲當你浮動的東西它從文檔流中被移除** __ – j08691

@亞當 - buchanan-史密斯的回答是在沒有浮標的情況下這樣做的好方法。

但是要回答你的問題，發生了什麼是<ul>沒有高度。正如@ j08691的評論所說，float ed元素在其容器中不佔用垂直空間。在這個例子中，第二<ul>只是顯示爲一條紅線：

ul { 
 
    outline: 1px solid red 
 
} 
 
.with-floated-lis li { 
 
    float: left 
 
}

<ul> 
 
    <li>not floated</li> 
 
</ul> 
 

 
<ul class="with-floated-lis"> 
 
    <li>floated</li> 
 
<ul>

的技巧來解決這個問題被稱爲「clearfix黑客」，和它在前端開發的必備工具。當你漂浮的東西，希望它的容器垂直擴展到包含浮動元素，應用clearfix到容器：

.clearfix:before, 
 
.clearfix:after { 
 
    content: " "; 
 
    display: table; 
 
} 
 
.clearfix:after { 
 
    clear: both; 
 
} 
 
ul { 
 
    outline: 1px solid red 
 
} 
 
.with-floated-lis li { 
 
    float: left 
 
}

<ul class="with-floated-lis clearfix"> 
 
    <li>floated, ul has clearfix</li> 
 
</ul>

尼古拉斯·加拉格爾寫道clearfix。他的帖子在這裏http://nicolasgallagher.com/micro-clearfix-hack/。閱讀有關clearfix的更多信息並在此處浮動https://css-tricks.com/snippets/css/clear-fix/

來源

2016-09-06 21:37:13 henry

在這種情況下，你應該使用的display: inline代替float: left見例如https://jsfiddle.net/kvb5hb6f/7/

而且對浮動元素一個良好的開端解釋在這裏看到http://www.hongkiat.com/blog/css-floats/#What_happens_to_an_element_when_it_floats

li{ 
display:inline; 
list-style:none; 
}

來源

2016-09-06 21:07:04

感謝亞當......本文解釋了一個修復，https：//designshack.net/articles/css/everything - 你永遠不知道 - 關於css-floats.but但我無法複製雖然。我喜歡你的解決方案，這很簡單 – Sahithi

https://designshack.net/articles/css/everything-you-never-knew-about -CSS-花車/ – Sahithi

關於CSS浮動的困惑

回答

相關問題