Why the text or images are not placed behind a floating element?

Question

Why the text or images are not placed behind a floating element?

On this link:http://codepen.io/anon/pen/LVWmvp, you can see the example. The "blue" div is placed behind the "transp" div. But the thing is that the text (or an image) is not placed behind the "transp" div also. And please notice that the p tag is in the "blue" div.

So my question is: Why does this happen? Why the text is not placed behind the "transp" div like his parent?

I have been looking for an answer. But I couldnt find something to explaining this situation.

Could you please help me? :)

This is the code you will find on codepen.io: HTML

<div id="transp">
</div>

<div id="blue">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id dolor scelerisque, pellentesque arcu sed, vehicula enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis felis eros, accumsan eget erat non, vulputate blandit urna. Sed consequat nibh vitae lectus tempor viverra. Quisque condimentum, elit id pretium accumsan, quam nunc faucibus risus, id tincidunt massa est in turpis. </p>
</div>

CSS:

#transp{
    border: 1px solid #000;
    height:200px;
    width:200px;
    float:left;
}

#blue{
    background-color:#00ffff;
    height:200px;
    width:600px;
}

This is what you will see:

Answer 1

The point of floating is to place an object beside a paragraph of text or other inline content, such that the content will flow around it. From the spec:

A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the 'clear' property). Content flows down the right side of a left-floated box and down the left side of a right-floated box.

Having text ignore a float would defeat the purpose of floating altogether.

The float is removed from normal flow, which is why the "blue" div is positioned as though the floating element were not there. As a result any text that flows vertically past the floating element will start directly underneath, rather than leaving a gap there. You can see this if you make your div narrower and taller (or remove the height declaration).

Answer 2

The simple answer: because you have a float:left on #transp. What this does is tell the browser that #transp should go to the left of the normal flow, force any subsequent block-elements (div) to tolerate it on the left. In effect, #transp becomes like an inline element, but with size.

This was the way to make things flow in a row before the advent of display: inline-block. These days, with more advanced css techniques, floats are typically considered bad practice for layout, so they should be avoided alongside tables.