Behavior of <p> inside float
css, html
Solution
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
Problem
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