Web page Layout Basics-Floating Finishing

First, float

1. When the element does not have a width value set, and the Float property is set, the width of the element changes depending on the content

2. Clear floating

(1) Clear properties: Both, left, right-----add to elements affected by the float

Note: When a parent contains a block that is indented with a clear:both, clearing the float is not valid, and he is generally used to clear the float immediately after the element next to it.

(2) Set width equal to 100% and set Overflow:hidden-----Add to elements affected by the float

3. Still in the standard document stream

Second, Position properties: static (stationary), relative (relative positioning), absolute (absolute positioning), fixed (stationary positioning)

1. Relative positioning: Offset relative to its position; still in the standard document flow; with offset and Z-index properties

2. Absolute positioning: Set up to include blocks (length, width by the content of the open) as a benchmark for positioning; completely out of the document flow; with offset and Z-index properties

(1) When the ancestor element is not positioned, the reference datum is offset with

(2) When there is a positioned ancestor element, the reference datum is offset from its nearest positioned ancestor element

4. Set the float to Li, it is out of the document flow, at this time want to set the background color for UL must be set to UL width.

Effect: Increase the height after a:hover, while adding a negative value to a:hover margin-top

Web page Layout Basics-Floating Finishing