如何在定义了浮动的情况下阻止 <div> 相互移动？答案

【问题标题】：How to stop <div>s from moving into each other with float defined?如何在定义了浮动的情况下阻止 <div> 相互移动？
【发布时间】：2015-11-09 14:56:25
【问题描述】：

到目前为止我还没有找到答案的非常简单的 CSS 问题：

我正在尝试在一行中并排放置两个 div 的页面（使用 float:left; 和 float:right;），然后在它们下方放置一个 div。问题是，如果顶行（定义为 div 本身）太宽以至于两个 div 之间的空间可以容纳底部 div，则底部 div 向上移动到顶行，从而形成单行三个 div 的外观.我不知道这是否清楚，但这是代码：

<div id="top div" style="width:400px;">
<div style="float:left;"><img src="images/xlab.jpg" width="100px" height="200px" /></div>
<div style="float:right;"><img src="images/ucbseal.jpg" width="100px" height="250px" /></div>
</div>

<div id="bottom div"><img src="images/xlab.jpg" width="200px" height="200px" /></div>

因此，如上所述，由于顶部 div 在其左右子元素之间有 200px 的间隙，因此底部 div 中的图像在它们之间向上滑动。如果我将顶部 div 的宽度设为 399px，则不会发生。我尝试使用 CSS“clear”属性，但这并没有解决问题。我总是以草率的方式解决这种看似奇怪的行为，但想找到更好的做法。

非常感谢任何帮助或指导！

【问题讨论】：

标签： css html

【解决方案1】：

在第一个 div 上使用overflow:auto

<div id="top div" style="width:400px;overflow:auto;">
<div style="float:left;"><img src="images/xlab.jpg" width="100px" height="200px" /></div>
<div style="float:right;"><img src="images/ucbseal.jpg" width="100px" height="250px" /></div>
</div>

<div id="bottom div"><img src="images/xlab.jpg" width="200px" height="200px" /></div>

它将导致容器 div 扩展到其子项的内容，因此以下 div 将保持其位置..

【讨论】：

完美！多谢。似乎这应该是我关闭顶部 div 后的默认行为，但我相信这是有充分理由的。谢谢！
默认值，如 w3 所述，是 visible，这就是它不起作用的原因 .. w3.org/TR/CSS21/visufx.html#overflow

【解决方案2】：

在新的 div 上尝试 'clear' 属性：

<div id="top_div" style="width:400px;"> 
<div style="float:left;"><img src="images/xlab.jpg" width="100px" height="200px" /></div> 
<div style="float:right;"><img src="images/ucbseal.jpg" width="100px" height="250px" /></div> 
<div style="clear: both;" />
</div> 

<div id="bottom_div"><img src="images/xlab.jpg" width="200px" height="200px" /></div>

【讨论】：

或者只是在底部 div 中添加一个style="clear: both" 属性。
这对我很有用，我只是像 Rimas 建议的那样在底部 div 中添加了清晰的样式！
嗯，我只是再看看这个。大卫拉德克利夫的答案实际上更好，所以我相应地改变了我的答案。确保您了解这些之间的区别。如果您按照 Rimas 的建议进行操作，“top_div”上的任何填充都将被忽略，因为它会折叠。如果您在该容器中添加一个清晰的 div，则容器填充将具有（可能是预期的效果）。

【解决方案3】：

我会添加一个 div 来清除浮动：

<div id="top div" style="width:400px;">
<div style="float:left;"><img src="images/xlab.jpg" width="100px" height="200px" /></div>
<div style="float:right;"><img src="images/ucbseal.jpg" width="100px" height="250px" /></div>
<div style="clear:both;"></div>
</div>

<div id="bottom div"><img src="images/xlab.jpg" width="200px" height="200px" /></div>

【讨论】：

【解决方案4】：

我认为上述关于 style="clear:both;" 的建议是正确的。但是，我可能会尝试将该样式添加到您现有的“底行”div 中。它可能会节省您添加新 div 的时间。

【讨论】：

【解决方案5】：

我希望它不会迟到，但我遇到了同样的问题，只是想通了。与底部Div有关。将底部 div 的高度和宽度设置为 100%，并在底部 div 上设置溢出自动。现在 div 不会向上移动以填充空间。

【讨论】：