Question

使用“float：left;”并排放置div会导致问题。我似乎无法将另一个div直接放在浮动div之下。

参见JSFiddle - ＆gt; http://jsfiddle.net/8RgkE/

你可以看到绿色框位于红色和蓝色框的下方，但我需要绿色框向下移动两个方框。我似乎无法做到这一点，并保持“浮动：左”框。

以下是踢球者：红色和蓝色框的高度可能会发生变化，因此您无法将小方框封装成div并且大小为div。

HTML

<div id='red' class='box'></div>
<div id='blue' class='box'></div>
<div id='green'></div>

CSS：

.box {
  width:200px;
  height:200px;
  float:left;
}

#red {background-color:red;}

#blue {background-color:blue;}

#green{
  width:400px;
  height:400px;
  background-color:green;
  border:4px solid black;
}

Answer 1

你需要清除花车。

#green{
    clear: both;
}

http://jsfiddle.net/8RgkE/2/

Answer 2

您可以在clear: left;

上使用#green

http://jsfiddle.net/8RgkE/1/

Answer 3

您需要清除div才能开始换行。

DEMO http://jsfiddle.net/8RgkE/3/

我通常会使用div这样的结算

<div style="clear: both"></div>

另一种解决方案是将float: left替换为display: inline-block

DEMO http://jsfiddle.net/8RgkE/4/

Answer 4

最安全的＆amp;最可扩展的方法是在绿色div之前添加一个clear:both;的新元素。

HTML

<div id='red' class='box'></div>
<div id='blue' class='box'></div>
<div id='clear'></div>
<div id='green'></div>

CSS

#clear{
  clear:both;
}

Float下面的CSS项目：左边没有工作

4 个答案: