Detailed analysis of cssfloat attributes and position: absolute _ basic tutorial

I believe many people have this problem. Which of the following is better for float and position: absolute in the page layout? Since it is a layout, float is good, which I usually use. This float can be cleared, and generally does not affect the overall layout. Position and positioning are not restricted. It seems that there is no layout. Generally, you can consider using it when doing any special positioning or floating layer. For normal page layout, I personally suggest using the FLOAT 1. float attribute to define the direction in which the element floats. In the past, this attribute was always applied to the image, so that the text is centered around the image. However, in CSS, any element can float. A floating element generates a block-level box, regardless of its own elements. P is a typical block-level element that occupies a single row.

First, let's see how the most basic block-level elements are arranged. Html code. The following styles are based on this.

The Code is as follows:

Box 1

Box 2

Box 3

Css code:

The Code is as follows:

. BoxBg {
Margin: 0 auto;
Width: 500px;
Height: 200px;
Border: 2px solid # ccc
}
. Box1 {
Width: 100px;
Height: 50px;
Background-color: red
}
. Box2 {
Width: 100px;
Height: 50px;
Background-color: blue
}
. Box3 {
Width: 100px;
Height: 50px;
Background-color: green
}

Execution result:

Since p is a block-level element, the boxes are arranged vertically. In practice, boxes are usually arranged horizontally. There are two ways to achieve this. First, display: inlin-block;

The Code is as follows:

. BoxBg {
Margin: 0 auto;
Width: 500px;
Height: 200px;
Border: 2px solid # ccc
}
. Box1 {
Width: 100px;
Height: 50px;
Background-color: red;
Display: inline-block
}
. Box2 {
Width: 100px;
Height: 50px;
Background-color: blue;
Display: inline-block
}
. Box3 {
Width: 100px;
Height: 50px;
Background-color: green;
Display: inline-block
}

Execution result:

As for the gap in the middle, it is traced back to the essence because of the blank space between elements. Therefore, you can set the fone-size on the parent element to adjust the size of the gap.

The Code is as follows:

. BoxBg {
Margin: 0 auto;
Width: 500px;
Height: 200px;
Border: 2px solid # ccc;
Font-size: 34px;
}

After font-size: 34px, the gap will become wider.

Execution result:

Similarly, to remove the gap, You Need To Set font-size: 0;

The Code is as follows:

. BoxBg {
Margin: 0 auto;
Width: 500px;
Height: 200px;
Border: 2px solid # ccc;
Font-size: 0
}

Execution result:

In this way, the desired layout is achieved, and the text in the box disappears. It also proves that the size of the text affects the gap. You only need to reset it in the sub-element. Of course today's focus is not that. Similarly, float: left; can be easily implemented.

The Code is as follows:

Execution result:

After a float element is added, the floating element is displayed next to the parent element border or another floating element border. For example, in the following example, when the total width of a floating element is greater than that of the parent element, the line feed and the line feed are displayed after the previous float.

The Code is as follows:

Execution result:

If inline-block is used, what will happen?

The Code is as follows:

Execution result:

In this case, frame 3 starts a new line instead of following frame 1. (The gap between 1 and 2 is not mentioned here.) This is also a judgment using inline-block and float, if the width of the module is different, float layout may lead to different results. Therefore, it is excellent to use float when the width and height are unchanged. If the width and height are different, you need to look at the specific layout, use appropriate attributes.

The following code is pasted to only the modified part. The other parts remain unchanged and the structure remains unchanged.

What is the result of removing the float: left of box3? According to our understanding, floating elements do not occupy space, that is, box 3 will ignore Box 1, and box 2 will be directly adjacent to the border of the parent element, that is, box 1 will cover Box 3? What is the result?

The Code is as follows:

. Box3 {
Width: 100px;
Height: 50px;
Background-color: green;
}

Execution result:

Why does text in box 3 appear below rather than being overwritten by box 1? Next, let's look at the code.

The Code is as follows:

. Box3 {
Height: 50px;
Background-color: green;
}

Execution result:

Do you see the difference? Yes. Box3 does not define the width. If the width is not defined, the default width is the width of the parent element. That is to say, the width is PX. The floating element overwrites the non-floating element, that is, the width of the front side of the box 3 is overwritten by the floating element. Why is the text not covered and the text is squeezed by the floating element after 200px?

Floating elements do not occupy the block space, so frame 3 is 100% of the parent container width PX, but floating elements occupy another space, that is, the row box space, in general, it is the space occupied by the text.

This is why the text will automatically wrap the image after the image float. Floating elements do not occupy block-level space, but affect the text and inline elements in block-level elements.

In this case, if you want the three boxes to have the same width, you only need to set the three frames width: 300px;

The Code is as follows:

. Box3 {
Width: 300px;
Height: 50px;
Background-color: green;
}

Execution result:

Here, the basic floating is over, so we should talk about the problem. Although floating is easy to use, there will also be many problems in reality. For example:

Execution result:

It is a common problem. The gray background should be as high as the box, but the facts are always unsatisfactory :)

The reason for this situation is that it is caused by floating. Yes, it is floating. In many places, floating elements are separated from normal streams. Therefore, when a floating element does not exist, therefore, the background will not be supported here, but those who read it carefully will remember that the floating element mentioned above will not affect the block box, but will affect the line box, that is, the text or Inline element, both block-level elements and inline elements belong to normal streams. Why does a floating element affect the row box if it is detached from a normal stream? In fact, I don't think it is necessary to worry about these conceptual things. According to my understanding, floating elements are not in a horizontal space with block-level elements, and inline elements with text are in a space. Therefore, the border here is equivalent to the background, so it does not affect the background elements, in general, clearing floating does not mean removing the float attribute of floating elements, but clearing floating elements around it so that there are no floating elements around it, therefore, if you want to set the lines 3 to 2, you cannot use clear: right in box 2. Instead, you must use clear: left in box 3;

The Code is as follows:

. Box3 {
Float: left;
Width: 100px;
Height: 50px;
Background-color: green;
Clear: left
}

Execution result:

OK! After understanding this, let's talk about how to make the background and frame high. First, the most direct way is to set the background height to be equal to the box. Of course, this is not the point, the following describes how to clear the floating point. First, let's look at the example:

The Code is as follows:

Box 1

Box 2

Box 3

Execution result:

The above results are implemented. It is obvious that an empty element with equal height is directly added, because the element is not floating, so it is the same as the background, so the background is opened. In fact, the principle of clearing floating is the same as this, and it is also possible to open the background; the preceding principle removes the width and height of the clear, and adds the clear attribute.

The Code is as follows:

. Clear {
Clear: left;
}

Execution result:

This may not be clear. add a few words to the clear box.

Execution result:

Because clear uses clear: left, there cannot be floating elements on the left of clear, so it must be displayed in another line. In this way, we can see that the results on the graph are actually backed up by an element. Of course, there are other methods to achieve this. Here we mainly want to clarify the floating point :)