Css 如何停止<；部门>；在定义了浮动的情况下，如何避免相互移动？

非常简单的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”属性，但没有解决问题。我总是以一种草率的方式来处理这种看似奇怪的行为，但我想找到一种更好的做法

---

非常感谢任何帮助或指导

我会添加一个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>

---

在新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 id="bottom_div"><img src="images/xlab.jpg" width="200px" height="200px" /></div>

---

在第一个div上使用

溢出：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将保持其位置。

我认为上面关于style=“clear:both；”的建议是正确的。但是，我可能会尝试将该样式添加到您现有的“最底层”分区中。这可能会节省您添加新分区的时间。

我希望不会太晚，但我遇到了同样的问题，刚刚解决了这个问题。与底部分区有关。将底部分区的高度和宽度设置为100%，并在底部分区上设置溢出自动。现在div将不会向上移动以填充空间。

完美！谢谢。似乎这应该是默认的行为，因为我关闭了顶部div，但我相信有一个很好的理由。谢谢如w3所述，默认设置为可见，这就是它不工作的原因。。或者只需在底部div中添加一个

style=“clear:tware”

属性。这对我来说非常有效，我只是像Rimas建议的那样在底部div中添加了clear样式！嗯，我刚刚又看了一眼。大卫·雷德克里夫的答案实际上更好，所以我相应地修改了我的答案。请确保您了解这两者之间的区别。如果按照Rimas的建议操作，“top_div”上的任何填充都将被忽略，因为它会折叠。如果在该容器中添加一个clear div，则容器填充将产生预期效果。