Detailed analysis of the difference between css float attribute and position:absolute_Basic Tutorial

1.float attribute defines in which direction the element floats. Historically this property has always been applied to images, causing the text to wrap around the image, but in CSS, any element can be floated. A floated element creates a block-level box, regardless of what type of element it is. div is a typical block-level element that occupies a line by itself.

Let’s first look at how the most basic block-level elements are arranged. html code, the following styles are based on this.

Copy code The code is as follows:

Frame 1

Frame 2
n

Frame 3

css code:

Copy 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 div is a block-level element, the boxes will be arranged vertically. In actual operation, it is often necessary to arrange the frames horizontally. There are two ways to do this. The first is display:inlin-block;

Copy 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;
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, the essential reason is traced back to the white space between elements, so setting the size of fone-size on the parent element can adjust the size of the white space.

Copy code The code is as follows:

.boxBg{
margin: 0 auto;
width:500px;
height:200px;
border:2px solid #ccc;
font-size:34px;
}

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

Execution result:

Similarly, if you want to remove the gap, you need to change font-size:0;

Copy code 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 inside the box disappears. This also proves that the size of the text affects the gap. Just reset it in the child element. Of course that's not the focus today. The same effect float:left; can also be easily achieved.

Copy code The code is as follows:

Execution result:

After a float is added to the

element, the floating element will be displayed immediately after it encounters the border of the parent element or the border of another floating element. For example, in the following example, when the total width of the floating element is greater than the parent element, the line is wrapped. When the line is wrapped, the previous float is encountered and displayed after it

Copy code The code is as follows:

Execution result:

What will be the result if inline-block is used?

Copy code The code is as follows:

Execution result:

At this time, box 3 starts on a new line instead of following box 1 (the gap between 1 and 2 will not be discussed here). This is also a judgment using inline-block and float. If the module widths are different Using float typesetting may result in different results than expected, so it is excellent to use float when the width and height remain unchanged. If it is inconsistent, you need to look at the specific layout and use appropriate attributes.

The code is posted below, only the modified part is posted, the rest remains unchanged, and the structure remains unchanged.

What will be the result if the float: left of box3 is removed? According to understanding, floating elements do not occupy space, that is, frame 3 will ignore frame 1, and frame 2 will be displayed directly next to the border of the parent element, that is, frame 1 will cover frame 3? What is the result?

Copy code The code is as follows:

.box3{
width:100px; height:50px;
background-color:green;
}

Execution result:

Why does the text in box 3 appear below instead of being covered by box 1? Then look at the code and pictures

Copy code The code is as follows:

.box3{
height:50px; background-color:green;
}

Execution result:

Do you see the difference? Yes. box3 does not define width; the width is removed. Without defining the width, the default width is the width of the parent element, which means that at this time, width: 500px; the floating element covers the non-floating element, that is, the width of 200px in front of box 3 is occupied by the floating element. Covered, why is the text not covered and the text is squeezed 200px behind the floating element?

Floating elements will not occupy the space of the block, so box three is 100% of the parent container width of 500px, but floating elements will occupy other space, which is the line box space. In layman's terms, it is the space occupied by the text.

This is also the reason why the text will automatically wrap around the image after it floats. Floated elements do not occupy block-level space, but will affect text and inline elements within block-level elements.

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

Copy code The code is as follows:

.box3{
width:300px; height:50px;
background-color:green;
}

Execution result:

Now that we have finished talking about the basic floating, let’s talk about the problems. Although floating is easy to use, it will also cause many problems in practice. For example:

Execution result:

Very common problem, under normal circumstances. The gray background should be as high as the frame, but the reality is always not satisfactory :)

We all know that the reason for this situation is caused by floating. Yes, it is floating. It is said in many places that floating elements will break away from the ordinary flow, so ordinary elements can be treated as if floating elements do not exist, so there is no such thing here. The background is opened, but students who read carefully will remember that it is mentioned above that floating elements will not affect block boxes, but will affect line boxes, that is, text or inline elements, whether they are block-level elements or inline elements. It belongs to the ordinary flow. If the floating element breaks away from the ordinary flow, why will it affect the line box? In fact, I don’t think there is any need to dwell on these conceptual things. According to my understanding, floating elements are not in the same horizontal space as block-level elements, but in the same space as text inline elements, so the border here is equivalent to being on top of the background, so it will not affect the background elements. What is usually called clearing floats, It does not mean to remove the float attribute of the floating element, but to clear the floating elements around it so that there are no floating elements around it. Therefore, if you want box 3 to move to the second row, you cannot use clear:right; in box 2. You need to use clear:left;

in box 3

Copy code The code is as follows:

.box3{
float:left; width:100px;
height:50px;
background-color:green;
clear:left
}

Execution result:

ok! Now that I understand this, let’s talk about how to make the background and the frame have the same height. The first way: the most direct way is to directly set the background height to be equal to the frame and it will be OK. Of course, this is not the point. Let’s talk about clearing it. float. First, let’s take a look at the example:

Copy code The code is as follows:

Frame 1

Frame 2

Box 3

Execution result:

The above result achieves the result. It is obvious that an empty element with the same height is directly added. Because this element is not floating, it is the same as the background, so the background is stretched. In fact, the principle of using clear float is the same as this, and we also try to open up the background; above, remove the width and height of clear, and add the clear attribute

Copy code The code is as follows:

.clear{
clear:left; }

Execution result:

You may not be able to see this clearly, try adding a few words in the clear box

Execution result:

Because clear uses clear:left. In summary, There can be no floating elements to the left of clear, so it must be displayed on a new line. In this way, you can see that the result in the picture is actually a background held up by one element. Of course, there are other ways to achieve it. The main thing here is to explain floating clearly:)