Over-flow understanding - Floats

[adamwestrop]

I would be grateful if someome could check my understanding to a few scenarios:-

(1) <ul> and style the <ul> then float the <li> the <li> automatically pops out of the container of the <ul>, thus if I have applied some style to the <ul> then I would need to use overflow:hidden to the <ul> to get the style back?

(2) If I have a <p> and some formatting applied to it, then have a <q> and float it right, the formatting of the <p> would disappear, so would need to add an overflow to the <p> to get the formatting back?

Thanks

[resdog]

Unless you have specifically given the container element a width and height, then yes, you'd need to apply the overflow:hidden. Anything that has styles applied to it has to have a width and height. If it's an empty element, it will not have an inherent width or height. Only when you put items into it to assign it a width and height will it have a width and a height. However, if you float the element, it makes it "invisible" to the parent container in terms of width and height. Assigning a overflow:hidden allows the parent container to see them again.