关于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浮动的困惑

回答

相关问题