Clear and Float

Question

Hi,
I am atotally new beginner, I have learned some HTML in My life and did two tutorials on the Adobe website, and actually feel like alot of material has been covered,
Though there are some questions that keep on coming and I can't seem to figure them up.
The tutorial in question is the one called:
Taking a Fireworks comp to a CSS-based layout in Dreamweaver – Part 3: Layout and CSS
and is located in this address: http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt3.html
Questions:
1. why in the Header div (#header) do we need to set up the float to left? obviously without it the background doesn't work well. but we have set the width to be 100% and it's the first component to be shown on stage so why do we need to float it left? and why doesnt it work without it?
2. when setting the properties for the Masthead div (#Masthead) why do we need to do this step? "In the Clear menu, select Both." What's the clear is for? Why background shows with and doesn't show without this step?
3. content-wrapper it says: "From the Float menu, select Left." Why?
4.footer div it says: "From the Clear menu, select Both." Why?
5. The clearfloat class it says:
The clearfloat class rule of the layout is for the br elements you placed in the code before Module 4 and after the closing div for the footer-wrapper and before the closing div for the container. The trick here is to remove anything that causes the break to have dimension:
1. Click the Plus button to create a new CSS rule.
2. Select Class as the selector type.
3. Name the selector .clearfloat (don't forget the period) and click OK.
This is the name you gave the class in the markup when you added the br clearing element.
1. Select Type from the Category list.
2. Set the font size to 1 pixel.
3. Set the Line height to 0.
4. Select Box from the Category list (see Figure 27).
5. Select Both from the Clear pop-up menu.
6. Set the height to 0 and click OK.
I can't seem to understand it and what's the porpuse of this... why did we need to have the BR in the first hand?
I hope those questions make sense
other than that I loved those tutorials and they totally make sense and are so good to help people learn their way into web and dreamweaver
Thanks Ahead!
Shlomimoto

Answer 1

I've just looked at that tutorial and setting float: left; on the 'header' was probably a legitimate way of clearing the floats in the 'header' <div> in 2008. We are now in 2013.
Times move on and the more accepted way now of clearing floats in a wrapper <div>, which the header is,  is using overflow: hidden; ( as blelow):
#header {
    color: #FFFFFF;/
    background: #131313 url(images/header_bg.jpg) repeat-x;
    padding: 15px 0px;
    overflow: hidden;
I can't for the life of me see why you would want to set the header <div> width to 100% though. As far as I know a <div> will stretch to fill up the available space, nothing in my experiences has ever required me to set 100% as a width that I can recall.
shlomimoto wrote:
2. when setting the properties for the Masthead div (#Masthead) why do we need to do this step? "In the Clear menu, select Both." What's the clear is for? Why background shows with and doesn't show without this step?
Oh well there you go this just proves this constructon method is way outdated. If you use the more accepeted method overflow: hidden; on the header <div> to clear the floated elements within it there is no need to set clear: both; on the masthead <div> making life much simpler for you.
Conclusion try and find a more up-to-date tutorial because you're already 5 years behind learning this duff stuff.