Float With Content That Floats Around And One That Is Underneath

OK so I was reading a bit about floats. If something is left floated the content that come after it floats around the floated element right: HTML:

Solution 1:

From MDN

text and inline elements will wrap around it.

All of your .block elements, because they are <div>s, they are block elements

Know that block elements normally are placed one under the other, like appropriately enough, blocks.

So what happens in your second fiddle is this:

The two floated .blocks are placed next to each other, outside of the normal flow, and the rest of the .blocks are placed like normal block elements, following the normal flow, that is, one under the other, as if the two floated .blocks did not exist.

This happens in your first fiddle as well, it's just that you do not see the actual block being below the two floated blocks, you only see the text which wraps around the floated blocks.

I added some colour so you can actually see that it happens in both cases:

https://jsfiddle.net/mkarajohn/vejxdn4z/1/

In your second fiddle, if you wanted the rest of the blocks to be placed next to the two floated blocks, you should add display: inline-block to their CSS

Solution 2:

When you place the "< div> ...TEXT TEXT TEXT < /div>" so the orange block is recognized an block element, so is float left bottom, and it's OK, it just need a blockin element to make that effect, so when you place a

<divclass='block green'></div>

That make the same effect as the text, but with the difference that this time the orange is below the pink block element.

If you decide to remove the third div in each case you'll see that they both act the same way.

Share