Float and clear float, float clear float

Float and clear float, float clear float

I. Floating (float :)

First, let's talk about float. What is a standard document stream first?

Standard document flow in HTML refers to html documents with certain tag attributes and html semantics. The microscopic manifestation is: 1. Blank folding: for example, if you want to keep the two labels close to each other, there must be no space in the middle. 2. When the height is not neat, the bottom is aligned by default. 3. line feed automatically when the line is full.

It can be divided into text-level and container-level by TAG. A document stream can be divided into block-level elements and intra-row elements.

Then, the topic to be discussed is floating, but the document is out of the standard document flow.

There are four effects of floating:

1. Remove elements from the standard document stream.

Second, floating elements are closely related to each other.

Third, floating elements have a "word circle" effect. For example, text is placed around the image.

Aspect 4: Floating shrinkage. For example, if the floating is not set to width or height, it will shrink to the content size.

In addition, the parent element cannot be moved out of height.

2. How can we make it clear?

There are also four methods:

1. Add a height to the ancestor element of the floating element to make the floating in the ancestor Element

For example, after adding a height:

2. Add clear: both to the following element;

Example:

3. Use the "partition method" (many technical experts prefer the "internal wall method").

Example:

In the internal wall method, the class = "cl h8" div is put under the box1, and the above effect can also be achieved.

4. Use overflow: hidden; To clear float

Example:

In this article, we will focus on the four methods to clear floating. You are welcome to increase the number and provide comments!