XHTML + CSS uses float and positioning for webpage layout

I have read a lot of documents about xhtml and css recently. Here I will write down the summary first. The first question is about div + css. The most basic one is how to use them for layout.
Floating
CSS allows any element to float, whether an image, paragraph, or list. Regardless of the status of the previous element, it becomes a block-level element after floating. The floating element width defaults to auto.
Floating has a series of rules to control it.
1. The outer edge of the 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 fluctuate up or down.
4. If a floating element is displayed after another floating element and exceeds the capacity block, it falls below any previous floating element. Simply put, if there is no space, just start another line.
The following is an example:

The code is as follows:	Copy code
<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. The clear function is to prevent the elements under the floating element from being surrounded by it.
Positioning
Position, we usually use absolute (absolute) and relative (relative) Positioning. Using these definitions, we can also layout and make an example of the previous row and two columns.

The code is as follows:	Copy code
<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 a pop-up menu is created, I will use Positioning. The parent element is relative to position: relative, where the child element is absolute position: absolute, through top, right, bottom, left to control the position of the child element. Note that the position of the child element is relative to the parent element, rather than the entire page.
Differences between floating and positioning
Although positioning can also be done, its features determine that it is not suitable for page layout, because the defined elements occupy any space in common documents will be disabled, it can be said that it is floating on the whole page, so it can overlap with other content on the page.
This feature makes it easy for us to make other special effects, but compared with the floating layout, we still use floating.