1. Floating
Floating Actually, when we learned before, we used float to float. Let’s take a look
Then we let this a2 float to the left
As you can see, our BBB immediately leaned to the right of this AAA
This is the effect brought by float, the html page here has been out of this standard flow
Two, clear effect
clear can clean up this floating style, let's use it
As you can see, we let a2 float to the left and a3 to float to the right, but it is not difficult to find that the paragraph p has actually moved up. We add a style to a4 so that it does not float.
As you can see, after we set clear to both, the p tag is well displayed below the AAA and BBB
3. Positioning
The positioning we use is position. This attribute has several values, one is static, and this is the default, which means positioning according to the standard flow. There is also relative, which is offset by a certain distance from the original standard position. Then there is absolute, this is absolute positioning, this is offset based on the containing box, and finally there is a fixed, this is fixed positioning, positioning is based on this browser, let’s see one by one
1. static
In fact, the default is static, which is the standard stream positioning
In fact, there is no change at all, because the default is the standard stream positioning, so we can't see anything, removing and adding are the same
2. relative
Let's set the position of this box of div2 to relative, and give a right: 20px; let's take a look at the effect
As you can see, it ran away and moved 20px to the left relative to the outer div1
3. absolute
Absolute positioning can be said to be something that may be commonly used in the future, not much nonsense, just go to the example
As you can see, this div1 has become a straight line. This is because we did not set the height for this div1, only a width, and the div inside is gone. After lack of content, it becomes a straight line. After div2 becomes an absolute positioning, it will be displayed at 20px on the right side of the example
The benchmark for absolute positioning is offset by the containing box, and the containing box is our body
But let’s modify it again
After we set the position for this div1, this div2 will not be offset based on this body, but will be offset by 20px based on div1
This means that our containment box is actually the nearest label with position. If not, it will be offset according to the largest containment box, which is the body.
4. fixed
fixed, this is similar to absolute above, but this is offset according to the size of the browser, let’s take a look
The same piece of code, except that the value of position is modified, it becomes a different look
That's it, everyone, practice it, and contact me if you have any questions. QQ: 2100363119
Recently my official website has been opened, welcome everyone to visit: https://www.lemon1234.com