CODEWITHSUNDEEP
htmlcss
Unknown developer
Unknown developer

Reputation: 5940

Behavior of <p> inside float

I have the following HTML:

<div id="test">       
    <p>
      Floating behaves differently with  paragraphs. Floating behaves differently with  
      paragraphs. Floating behaves differently with  paragraphs.
    </p>
</div>

with this CSS:

#test{
    float:left;
    background-color: #222;
    margin-left: 4%;
    width: 300px;
    padding-top: 15px;
    padding-right: 30px;
    padding-left: 30px;
    text-align: justify;
    color: #FFF;    
}

You may see at http://jsfiddle.net/fM4bE/ there is a space at the bottom of test div created by p /p. If we remove float:left this space disappears as if it wasn't any /p... Could anyone explain to me why?

Thank you

Upvotes: 3

Views: 86

Answers (1)

j08691
j08691

Reputation: 207919

Without the float:left being applied on the div, what you'd see is collapsing margins, where the bottom margins of the div and p merge:

Parent and first/last child If there is no border, padding, inline content, or clearance to separate the margin-top of a block with the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block with the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

However, the float:left creates a new block formatting context, similar to what adding overflow:auto would do if you added it to the div in place of float:left. This allows the margins to not collapse.

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.

See also: http://www.w3.org/TR/CSS21/visuren.html#block-formatting

Upvotes: 6

Related Questions