Article directory
1. float
CSS's Float (floating) will move the element to the left or right, and the surrounding elements will also be rearranged.
The horizontal direction of the element floats, which means that the element can only be left or right.
A floated element moves as far left or right as possible until its outer edge touches the border of the containing box or another floated box.
Elements after the floated element will wrap around it. Elements before the floated element will not be affected.
If the image is floated left, the following text flow will wrap to the right of it:
2. Pseudo elements
Pseudo elements: Simulate the effect of labels through CSS
| pseudo element | effect |
|---|---|
| ::before | Add a pseudo-element before the content of the parent element |
| ::after | Add a pseudo-element at the end of the parent element content |
必须要有content属性- Pseudo-elements are inline elements by default
3. Standard stream
块级元素独占一行->垂直布局行内元素/行内块元素 一行可以显示多个 水平布局
4. Problems with inline block elements
Next, let’s talk about the problems that will arise with inline block elements:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 60px;
display: inline-block;
}
.one{
background-color: skyblue;
}
.two{
background-color: grey;
}
</style>
</head>
<body>
<div class="one">1</div>
<div class="two">2</div>
</body>
</html>
This is the effect of div wrapping and writing.
This is the effect of writing without wrapping.
If you want to wrap and write without spaces between the two boxes, you need to use float
5. The role of floating
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 60px;
display: inline-block;
}
.one{
background-color: skyblue;
/*设置浮动*/
float: left;
}
.two{
background-color: grey;
/*设置浮动*/
float: left;
}
</style>
</head>
<body>
<div class="one">1</div>
<div class="two">2</div>
</body>
</html>
display effect:
6. The characteristics of floating
1.浮动会脱离标准流(俗称"脱标"),在标准流中不占位置
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.one{
width: 100px;
height: 100px;
background-color: skyblue;
}
.two{
width: 200px;
height: 200px;
background-color: grey;
}
.three{
width: 300px;
height: 300px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="one">111</div>
<div class="two">222</div>
<div class="three">333</div>
</body>
</html>
This is the display effect without floating. Let’s take a look at the one with floating.
Based on the above code, add a floating to the one class selector
.one{
width: 100px;
height: 100px;
background-color: skyblue;
/*增加浮动*/
float: left;
}
Effect:
You can see that the second one has reached the position of the first div, which is the phenomenon of floating off-label, which is equivalent to flying up.
But the blue div box does not cover the content of the gray div box, although It is off-label, but it is a kind of semi-off-label.
浮动的元素比标准流多半个级别,可以覆盖标准流中的元素This is also the second characteristic of floating
At this point, if you add floating to the second div, what will be the effect?
Example:
.two{
width: 200px;
height: 200px;
background-color: grey;
/*增加浮动*/
float: left;
}
Effect
The second div is aligned next to the first div, and 浮动找浮动下一个浮动元素会在上一个元素的左右浮动 ->浮动的第三个特点
the floating elements are aligned against the top, which is also called 顶对齐If you don’t want top alignment, you can also add margins to the box to achieve misalignment
Floating display effect:
- A row can display multiple
- Width and height can be set
浮动后的元素具有行内块元素的特点,但是浮动的元素之间换行写不会有缝隙
7. Clear float
Clearing the floating here is not to clear the floating code, but other elements will be affected by the floating, we don't want other elements to be affected by the floating, so we need to clear the floating Example
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.one{
width: 500px;
height: 300px;
background-color: pink;
margin: 0 auto;
}
.two{
width: 100%;
height: 100px;
background-color: greenyellow;
}
.three{
/*浮动*/
float: left;
width: 300px;
height: 300px;
background-color: skyblue;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="one">
<div class="three"></div>
</div>
<div class="two"></div>
</body>
</html>
Effect:
If I want the green box to be displayed at the position below the blue box
, then if the height of the pink div is removed, the following effect will appear:
press F12 to check at this time, we find the first div The length and width are 500 * 0.
The blue div has been off the mark. So the green div has gone to the top. This is affected by the floating
父子级关系,父元素没有高度,子元素浮动,后面的标准流盒子就会受到影响
最简单的办法就是给父元素设置高度,但是通常情况下,不会这么写
Here is another way to clear the float
Method 1: Extra Tags
The method has two steps:
1.给父元素内容的最后加一个块级元素 2.给增加的这一个块级元素增加设置: clear:both
Example:
Modify the code just now
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.one{
width: 500px;
/*height: 300px;*/
background-color: pink;
margin: 0 auto;
}
.two{
width: 100%;
height: 100px;
background-color: greenyellow;
}
.three{
float: left;
width: 300px;
height: 300px;
background-color: skyblue;
}
/*清除浮动*/
.clearfix{
clear: both;
}
</style>
</head>
<body>
<div class="one">
<div class="three"></div>
<!-- 增加一个块级元素 -->
<div class="clearfix"></div>
</div>
<div class="two"></div>
</body>
</html>
Effect:
This method not only clears the floating, but also makes the pink color appear again.
This method is to increase the inline elements and open the original box
缺点: 增加了额外的元素,会使HTML结构变得复杂
Method 2: Single pseudo-element
This method is to make pseudo-elements replace additional tags
. Basic writing:
.clearfix::after{
content: '';
display: block;
clear: both;
}
Supplementary writing (for compatibility ):
.clearfix::after{
content: '';
display: block;
clear: both;
/*在网页中看不到伪元素*/
height: 0;
visibility: hidden;
}
Just let the parent element call this pseudo-class selector directly.
The principle is the same as the extra tag method
Method 3: Double Pseudo-Elements
Similar to the single pseudo-element writing method
:
.clearfix::after,
.clearfix::before{
content: '';
display: table;
}
/*真正清除浮动的标签*/
.clearfix::after{
clear: both;
}
这里的 .clearfix::before 是为了解决外边距塌陷问题
Then let the parent class refer to the pseudo-class selector.
The single pseudo-element and the double pseudo-element are two ways to clear the float. You don’t need to memorize it, just use it directly.
Method 4: overflow
There is another very simple way to clear the float: 直接给父元素设置 overflow:hidden
I won’t demonstrate it to you here, it’s very simple. You can try it yourself
Thank you for watching! I hope this article can help you!
Column: "Web Front-End Development" is constantly being updated, welcome to subscribe!
"Wish to encourage you and work together!"
