Hi JW!
First off, can I say (in a nice way!) this is really a rather fundamental question to look for a quick answer to in a forum. If you're having trouble with the basic concept of floats, you're probably at an early enough stage in your learning of CSS that the best thing to do is get a good introductory book and work through it. My favourite for beginners is 'Head First HTML with CSS and XHTML', by Elisabeth and Eric Freeman. Don't be put off by the title, thinking you already know HTML: implementing designs with CSS is about developing your HTML and CSS in concert; you need to understand how both interact.
Having said that, I'll have a go at answering your specific question:
- Web pages (HTML) are just text. It is the browser that renders the web page and makes it something you might like to look at.
- Browsers have default rules about how to render stuff like Lists, Paragraphs, Headings etc.
- CSS provides additional instructions that the browser takes note of (with greater or lesser accuracy) when rendering the page. You can override a lot of the default rendering with CSS.
- One of the most fundamental concepts in rendering a page is 'flow'. This means that the browser starts at the top of the HTML file and, barring any other instructions in the HTML or CSS, lays the page out from top to bottom, following two rules:
- 'Block' elements, such as Paragraphs and DIVs go below one another down the page.
- 'Inline' elements, such as Links, SPANs and IMGs go one after another across the page, until they reach the page width and wrap onto the next line.
- 'Float' is most usually applied to block elements, when we want to 'break the rules' and put two block elements next to eachother across the page, contrary to the normal rendering rules.
- When you float an element, you take it out of the normal flow of the page. This means that other block elements can go next to it, but also that from the perspective of the page as a whole it now has no height, allowing other things to go beneath it.
- You can force a later element to 'look for' and go below floated elements by applying the 'clear' property (clear:left; clear:right; or clear:both; ).
So, two practical rules:
- To make sure following elements 'clear' the bottom of your float, use 'clear'.
- To make sure a containing element (a DIV, usually) expands vertically to contain a floated element, the containing element must also be floated.
Have fun, and do take a look at that book. It will help you loads in getting up to speed.