CSS floats and clears

CSS Floating and purging

What is floating?

On the effect, let the element float (float up) and move (moving left or right).

Floating Essence: It is to save two block elements in one row .

Float

Value: Mainly control the direction of the float

Left: let elements float

Right: let elements float

Characteristics of float:

1. When some elements in a webpage (such as: DIV1,DIV2,DIV3) are set to float, these elements float up and encounter edges.

   Edge: The edge of the parent element (the edge of the. box), with multiple floating elements, the edge can also be the edge of the previous floating element

   The elements of the floating effect are separated from the normal flow of the document, the phenomenon is: float, float up

2. A floating element is set, which floats out of the normal document stream (box) and does not occupy space
3. If the element itself is an inline element, after the float is set, it turns into a block element that inherits some of the attributes of the block element, which can be set to a wide height after span is set to float:right. ）

   ?

   Example:

   ?

   ：

   There is a phenomenon called "lag" in the process of floating and moving elements (the cause of this phenomenon is usually our outer elements, such as. The box's wide height setting is unreasonable, and the div1,div2,div3 in box is inconsistent with the width and height of the box, and some of the elements in the boxes are stuck at the edges of other elements.

   Example code:

Clear: Properties: Clear

?

Value:

Right: Clears the effect of the conten of the previous element (. r) on the subsequent element (separate paragraph p)

Left: Clears the effect on the subsequent element of the right-hand floating property of the preceding element.

both: Clears the effect of the left and right floats of the preceding element.

1. Clear the other elements after the floating element, no longer inherit the floating characteristics, will revert to the original default layout method.

2. After the floating feature is cleared, the enclosing element " visually " encloses the floating element.

?

Demand:

?

?

Style code:

Structure code:

?

?

Floating and purging: sample requirements:

Analysis:

1. Speak of this requirement as a box content
2. Re-analyze box with four Li tags inside box
3. Each of the LI tags: a picture hyperlink and a text hyperlink;

Style code:

Structure code:

Eventually:

CSS floats and clears