And here is that techinical explanation
A web page consists of roughly three main layers, listed in order of being "closest" to the user's eyes:
1. Window (the whole browser lives here)
3. Document Flow (Also known as layers/absolute positioning.
Now within layer 3, there are three sub-layers:
3. Document Flow
A. Floated Elements |
| B. Inline Elements
C. Block Elements
Now the reason I indented 3.B. is because Inline elements (like text, <img />, <strong>, <span>, etc) will flow around the edges of floated elements. Floated elements, however, do not exist nor take up room in the Block element layer. So literally, the UL tag didn't contain anything. The LI tags you floated were raised out of the Block element layer (Layer 3.C, which contains the UL tag also) and the UL tag had no width and no height.