向左浮动的右侧，使其显示在下方

Question

我有以下HTML：

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

在浏览器中显示如下：

如何让漂浮的div下面出现“not floating”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的意义是向左浮动到其他内容，直到你清除浮动。

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

此外，建议使用单独的css规则而不是内联样式。

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

你必须“清楚：正确”第一个div ......