Xhtml+css using floating and positioning for Web page layout

css|xhtml| Float | Web page

Recently in doing a document, about XHTML and CSS, read a lot of information, here first the summary of things to write out. The first is the div+css question, the most basic, how to use them to layout.

Floating

CSS allows any element to float float, whether it's an image, a paragraph, or a list. Floating is a block-level element regardless of the state of the previous element. The width of the floating element defaults to auto.

Float has a series of rules to control it.
1. The outer edge of a floating element does not exceed the inner edge of its parent element.
2. Floating elements do not overlap each other.
3. Floating elements do not float up and down.
4. If a floating element is displayed after another floating element, and it exceeds the hold block, it falls below the position of any previous floating element. To be simple is to have no space, just another line.

Here is an example:

<div id= "Main" >
<div id= "Box1" >box1</div>
<div id= "Box2" >box2</div>
<div class= "Clear" ></div>
</div>

#main {width:100%;}
#box1 {float:left; width:40%;}
#box2 {float:right; width:60%;}
. clear{Clear:both;}

This is an example of a row and two columns in which clear does not surround the elements below the floating element.

positioning

Position, we usually use absolute (absolute) and relative (relative) positioning, using these definitions, you can also do the layout, and make two columns of the above example.

<div id= "Main" >
<div id= "Box1" >box1</div>
<div id= "Box2" >box2</div>
</div>

#main {position:relative;width:100%;}
#box1 {position:absolute; top:0; left:0; width:40%;}
#box2 {position:absolute; top:0; right:0; width:60%;}

Usually, when I do the pop-up menu, I use the positioning, the parent element relative positioning Position:relative, where the child elements are absolutely positioned position:absolute, the Top,right,bottom,left value to control the position of the child element, Note that the position of the child element will be relative to the parent element, not the entire page.

the difference between floating and positioning

Although the layout can also be done by positioning, but its characteristics determine that it is not suitable for the layout of the page, because the defined elements in the normal document occupies any space will be closed, it can be said that it is floating on the entire page, so it can and the other content on the page overlap display.

This feature can be convenient for us to make other special effects, but relative and floating on the layout, we are more still with the float.