Float with content that floats around and one that is underneath

Question

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:

Answer 1

From MDN

text and inline elements will wrap around it.

All of your .block elements, because they are

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

0 讨论(0)

查看其它2个回答

发布评论:

提交评论

---

•  加载中...