Question on CSS floated child div

I was playing around with a floated div example, where I have a floated container and some floated child divs except one non-floated child

You can see the example on;

http://jsfiddle.net/emeRJ/7/

Now I wanted to understand the behavior or rendering for this non-floated child div...

2 questions:

1. Could you please explain how it renders currently and what difference does it make if I have it coded after all the child divs (i.e. it is the last child 开发者_如何学编程element)

2. Also will it have any impact on the non-floated child if I make the container as overflow:hidden ?

---

Answer 1

At the moment the un-floated div right at the top with the red border is displaying block so it spans the whole width of it's containing div. It is unaffected by the other divs in the containing element

If you move it to the last position in the containing div the other floated divs do affect the un-floated one so you need to clear: both; (which clears the float and places the un-floated div under the floated divs) with CSS, otherwise any text contained within the un-floated one will be floated to the left and then would proceed to wrap around the floated elements (it doesn't do this at the moment because the text isn't long enough). Unless that's what you are trying to achieve?

Answer 2

It shouldn't make any difference as nothing is actually overflowing the containing div which would be set to overflow: hidden;

Hope this helps