在左浮动右边的Div，使其显示在下面

Question

我有以下HTML：

<div style="float:left; background-color:#0CC;">Floating Left</div>
<div style="background-color:#03C; color:#FFF;">Not floating</div>

在浏览器中显示如下：

如何使“不浮动”的div出现在浮动的div之下？

Answer 1

只需添加clear: both; 插入CSS中的非浮动元素：

<div style="background-color:#03C; color:#FFF; clear: both;">Not floating</div>

http://jsfiddle.net/Kyle_Sevenoaks/SnAc9/

Answer 2

你需要清除浮子

clear:left

因为float:left的意思是float:left浮动到其余内容，直到清除浮动为止。

如果我误解了您，并且您想让第二个div让它的内容被浮动的div覆盖（“出现在浮动的div之下”），则需要绝对定位而不是浮动div。

另外，建议使用单独的css-rules代替内联样式。

Answer 3

您是说要插入左div吗？

http://jsfiddle.net/2xhGC/2/

的HTML

<div class="inset">Inset div that is wrapped by the other content.</div>
<div class="article"><!-- start slipsum code -->

<h1>I gotta go</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non justo ante, at auctor odio. Phasellus suscipit facilisis ligula eu dignissim. Praesent eget odio nisi. Sed in hendrerit massa. Aliquam laoreet fermentum sapien, vitae placerat velit pellentesque vel. Aliquam lectus nibh, porttitor non laoreet eget, varius ac enim. Vestibulum feugiat metus rhoncus libero rhoncus commodo. Phasellus id auctor nisi. Sed hendrerit eleifend egestas. Praesent et tristique nunc. Aliquam id velit tortor.</p>

<h1>Uuummmm, this is a tasty burger!</h1>
<p>Nullam tempus mauris id velit lobortis varius. Mauris tempor aliquet diam, eu egestas augue ultricies id. In cursus ullamcorper velit quis viverra. Maecenas non nisi erat. In hac habitasse platea dictumst. Ut ipsum turpis, consequat sit amet aliquet a, rutrum at erat. Vestibulum auctor, risus quis elementum accumsan, elit sem ultrices est, ut interdum sem erat id leo. Aliquam adipiscing ultricies justo, sed facilisis ipsum congue eget. Duis sem elit, faucibus non aliquam eu, pulvinar nec elit.</p>

<h1>Uuummmm, this is a tasty burger!</h1>
<p>Suspendisse venenatis iaculis est in malesuada. Nunc sit amet arcu eleifend felis bibendum rhoncus eget eu ante. Maecenas molestie, purus eget bibendum rhoncus, ipsum orci lobortis enim, sit amet congue nisl urna vitae arcu. Nullam eget ipsum sapien, ac accumsan augue. Suspendisse consequat aliquet commodo. Morbi vel arcu non risus tristique fermentum. Morbi viverra nisl nec dui iaculis pretium. Morbi id viverra erat. Donec molestie euismod ipsum, id commodo purus lacinia at. Ut auctor turpis sit amet erat ullamcorper eu gravida neque iaculis. Sed augue purus, aliquam sit amet faucibus quis, dapibus vitae odio. Nulla mollis faucibus pharetra. Phasellus eleifend sodales nisi id suscipit.</p>

<h1>I can do that</h1>
<p>Curabitur ac sem metus, in ornare lacus. Duis auctor hendrerit viverra. Morbi posuere fermentum laoreet. Suspendisse potenti. Phasellus auctor lacinia tristique. Mauris interdum turpis et libero fringilla a consectetur ligula malesuada. Suspendisse urna neque, sagittis nec suscipit eleifend, imperdiet in arcu. Cras sit amet arcu metus. Curabitur cursus, justo sed tempor volutpat, felis justo dapibus risus, non porta sapien lectus tempor arcu. Nunc vel enim lectus, et iaculis urna.</p>

<!-- please do not remove this line -->

<div style="display:none;">
<a href="http://slipsum.com">lorem ipsum</a></div>

    <!-- end slipsum code --></div>

的CSS

.inset{
    margin:1em;
    padding:1em;
    background-color:#ff0000;
    float:left;
    width:75px;
}

.article{
    padding:1em;
    background-color:#ccffcc;
}

.article p{
    line-height:1.4em;
    margin-bottom:.6em;
}

Answer 4

您应该使用clear: left ，这意味着该元素将不接受其左侧的浮动元素，因此将在其下方跳转。

Answer 5

您必须“清除：正确”第一格...