CSS page layout basics 3 -- element floating

CSS page layout basics 3 -- element floating
1.Float)It is one of the main functions used in modern CSS-based Web design. It can be used to create complex Web page la S and create navigation toolbar from unordered list, instead of using a table, you can create a table like this.
To make the element float to the left or right and wrap the subsequent text around it, you can use the float attribute. The value of the float attribute is none (not floating ), left (float to the left), right (float to the right ).
After the float attribute is used, floating elements are detached from the normal document stream, which affects other elements in the layout.
Float can be applied to any element.

I personally think we can understand floating in this way (if anything is wrong, please correct it). When we usually use block-level elements, if we nest two block-level elements in a div, under normal circumstances, these two block-level elements will be arranged from top to bottom, that is, one on and the other on, if we want to arrange the two block-level elements in a row (when the width of the two block-level elements does not exceed the width of their parent element ), we can use the float attribute to set it. Example:

Floating
 Div1div2

Before floating

Add to left floating: <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPHA + pgltzybzcm9 "http://www.2cto.com/uploadfile/Collfiles/20141015/201410150924364.png" alt = "\">

The Application of right is no different from that of left, mainly from left to right.

The result of the above example floating to the right:

Effect of text wrapping:

Text
 
Hua cited Hua and cited Hua as a story of chaos. On the day of the city's destruction, Princess Wei Ye Yu leads the country and lives again by the beads. When she caught up with others, she went to life and death, exploring dreams and memories. In the music of magic, all is the bitterness and bitterness of life. She met Chen guoshizi, who died in her country, in a phantom, with two identities and two sides.

Effect:

2. Floating Basic Behavior(1) When float is not equal to none, the element is regarded as a block-level element, which is equivalent to setting the display: block;
(2) When a text element is floating, the width attribute of the element must be set. If the width is not set, the element content is folded to the most possible minimum width.
(3) A floating element stays in the content area of its parent element and does not pass through the padding area.
(4) The margin elements of floating elements do not overlap.
(5) In the source document, adjacent floating elements cannot overlap.
(6) If an element floats in the same direction, each subsequent floating element must move in this direction until it encounters the inner edge of the parent element or the floating element in the front. (This will cause multiple floating elements to converge on the target edge)
(7) If there is not enough space for the floating element to appear side by side, the second floating element will move down until there is enough space to show it without overwriting the first floating element.
3, Rules that limit the height of the top edge of a floating Element:
(1) The top of a floating element must stay within the inner edge of its parent element.
(2) The top of floating elements not contained by block-level elements cannot be higher than that of the previous block-level elements.
(3) The top of the floating element cannot be higher than the previous floating element in the same document source.

4. clear floating: clear (can only be used for block-level elements ). In some cases, we want to clear the area of an edge of a floating element. Subsequent elements are displayed starting from the normal position of the container, in this case, we can use the clear attribute to prevent an element from appearing behind the floating element.

Clear attributes
 
Float is one of the main functions used in modern CSS-based web design. It can be used to create multi-column web page la S and navigation toolbar.
Clear floating Element
Use the clear attribute to organize an element to appear behind the element

Before using clear to clear floating effects:

After clear floating effects: