Commonly used methods for CSS layout: float:none|left|right
Value:
none:?Default value. Object does not float
left: text flows to the right of the object
right: text flows to the left of the object
How it works, see an example of one row and two columns
xhtml code:
| The following is the quoted content: <div id="wrap"> <div id="column1">This is the first column</div> <div id="column2">This is the second column</div> <div class="clear"></div> /*This is against the intent of the web standard, it just means that the elements below it need to be cleared*/ </div> |
CSS code:
| The following is the quoted content: #wrap{width:100;height:auto;} #column1{float:left;width:40;} #column2{float:right;width:60;} .clear{clear:both;} |
position:static|absolute|fixed|relative
Value:
static:?Default value. No special positioning, the object follows HTML positioning rules
Absolute:? Drag the object out of the document flow and use left, right, top, bottom and other attributes to perform absolute positioning relative to its closest parent object with the most positioning settings. If no such parent object exists, the body object is used. And its cascade is defined through the z-index attribute
fixed:?Not supported. Object positioning follows the absolute method. But there are some rules to follow
relative:?Objects cannot be stacked, but will be offset in the normal document flow based on left, right, top, bottom and other attributes.
It implements the example of one row and two columns
xhtml code:
| The following is the quoted content: <div id="wrap"> <div id="column1">This is the first column</div> <div id="column2">This is the second column</div> </div> |