html - float left の右に div し、下に表示する

Question

私は次のHTMLを持っています:

<div style="float:left; background-color:#0CC;">Floating Left</div>
<div style="background-color:#03C; color:#FFF;">Not floating</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は、フロートをクリアするまでコンテンツの残りの部分に左にフロートすることです。

私があなたを誤解していて、2 番目の div のコンテンツをフローティング div で覆う (「フローティング div の下に表示する」) ようにしたい場合は、div をフローティングする代わりに絶対配置が必要です。

また、インライン スタイルの代わりに別の CSS ルールを使用することをお勧めします。

Answer 3

clear: leftこれは、要素がそれ自体の左側にある浮動要素を受け入れないため、その下にジャンプすることを意味するものを使用する必要があります。

Answer 4

左の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 5

最初のdivを「クリア：右」にする必要があります...