Why isn't overflow:auto required for text content?

问题

In the following HTML snippet, how can I make the final paragraph appear under the 2 lists rather than to the right?

<div>
    <ul style="float: left;">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
    <ul style="float: left;">
        <li>item 4</li>
        <li>item 5</li>
        <li>item 6</li>
    </ul>
</div>
<div>
    <p>
        <!-- why the heck isn't this under the uls?! -->
        A final paragraph of text
    </p>
</div>

This HTML also available here: http://jsfiddle.net/8f2cE/

Also, I'd appreciate any background explanation as to why this behavior occurs at all. IMO this is inconsistent, because the 2 divs are root level have display: block; by default without any floating attributes set, so shouldn't they flow as "normal" from top to bottom down the page?

回答1:

When you float an element, it is removed from the normal flow (see first paragraph of https://developer.mozilla.org/en-US/docs/Web/CSS/float), and therefore will float left (or right) of whatever content follows (your <div> and <p>), and also its container will not stretch to its floated content by default. (in other words, display: block; alone does not contain floats).

To make an element contain its floats, you can either put an element with clear after your floats (as the other answers here suggest, ignoring your question title...), or you can apply overflow: auto; to the containing element, which is one of the properties which will trigger the block formatting context.

(text below from MDN)

Block formatting contexts are important for the positioning (see float) and clearing (see clear) of floats. The rules for positioning and clearing of floats apply only to things within the same block formatting context. Floats do not affect the layout of things in other block formatting contexts, and clear only clears past floats in the same block formatting context.

回答2:

Just add <div style="clear:both"></div> after the first div. As you are adding style float: left;, uls are losing their original position.

<div>
  <ul style="float: left;">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
  </ul>
  <ul style="float: left;">
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
  </ul>
</div>
<div style="clear:both"></div>
<div>
  <p>
    <!-- why the heck isn't this under the uls?! -->
    A final paragraph of text
  </p>
</div>

回答3:

Since you are giving float:left to ul, parent div loses its height.

Write:

div{overflow:hidden;}

This will give height to div.

DEMO here.

Clear the floats:

<div>
    <ul style="float: left;">
        .......
    </ul>
    <div class="clr"></div>
</div>

CSS:

.clr{clear:both;}

DEMO here.

回答4:

You should use a clearer with float divs:

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

like this:

<div>
<ul style="float: left;">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>
<ul style="float: left;">
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
</ul>
</div>
<div style="clear:both;"></div>
<div>
    <p>
         <!-- why the heck isn't this under the uls?! -->
         A final paragraph of text
    </p>
</div>

回答5:

You can add an extra div as specified by the other answers or add overflow:auto; width:10% to the first div itself

<div style="overflow: auto;width:100%">
    <ul style="float: left;">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
    <ul style="float: left;">
        <li>item 4</li>
        <li>item 5</li>
        <li>item 6</li>
    </ul>
</div>
<div>
    <p>
        <!-- why the heck isn't this under the uls?! -->
        A final paragraph of text
    </p>
</div>

Source : http://www.quirksmode.org/css/clearing.html

来源：https://stackoverflow.com/questions/21041297/why-isnt-overflowauto-required-for-text-content

标签

css

html

css-float