Written in the book of the former
Habitually go to Google Translate to take a look at float’s explanation:
she relaxed, floating gently in the water
A moment of imagination, a goddess, gently floating in the water. Happily splashing the water, wow…
Don’t want to, the world is not worth it, step into the topic, in the wonderful picture above, we can see that the goddess still occupies the space of water, the goddess is floating. All right, let’s get to the point…
I think a lot of people don’t even know what a float is, because a lot of its properties are related to the word or letter it’s named after, not just a random name. The name suggests something about the original design.
Identifying the problem is key
Ask yourself three questions:
What will be the impact of the first float? Second, how to solve these floating effects? Third, the PRINCIPLE of BFC?Copy the codeThe main problem with floating is that it breaks the flow of documents. So, float breaks the flow of documents. I looked up some information and finally found out why we had to design this API because float was designed to be able to type text around images. This is one of the things we sometimes wonder about: setting a float will still crowd out the text in the container.
For example, look at this code:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Float</title>
</head>
<style>
.z1{
height: 200px;
width: 200px;
float: left;
text-align: center;
line-height: 200px;
background: skyblue;
}
.fu {
width: 400px;
}
</style>
<body>
<div class="fu clearfix">
<div class="z1">Picture with float left</div>
<div class="z2">You see, I was not stopped by the floating brother oh, it was a magical journey, one day I met Snow White</div>
</div>
</body>
</html>
Copy the codeThe renderings are as follows:
See this, does not make some sense. As you can see from the figure above, even though the image floats, out of the normal document flow, and overlays elements that are not floating, it does not overwrite the text as well, which confirms the main purpose of the FLOAT API: to surround text with images.
When I thought about this, I suddenly realized what other layout patterns looked like and experimented with them. Drop the float property of container Z1 and add the position property as follows
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Absolute Float</title>
</head>
<style>
.z1{
height: 200px;
width: 200px;
box-sizing: border-box;
position: absolute;
text-align: center;
background: skyblue;
padding-top: 80px;
opacity: 0.8;
}
.fu {
width: 400px;
}
</style>
<body>
<div class="fu clearfix">
<div class="z1">Set positon to absolute picture</div>
<div class="z2">You see, I was blocked by absolute brother oh, it was a magical journey, one day I met Snow White</div>
</div>
</body>
</html>
Copy the codeThe renderings are as follows:
We can see that setting the absolute container is completely out of the normal document flow. Overrides all containers and text content at the current location. In contrast, this proves the main purpose for which float was designed. With this understanding, I think there is a clear direction on how to clear float, or what to replace float, in different businesses.
In fact, you can see that absolute and float do not overwrite the normal document flow before them. This is due to the browser’s rendering mechanism, which renders the content from top to bottom. Once the rendering succeeds, it is not overwritten by subsequent elements that float (regardless of forced overwriting with fixes and so on).
The simple code is as follows:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clear float</title>
</head>
<style>
.z1{
height: 200px;
width: 200px;
box-sizing: border-box;
float: left;
text-align: center;
background: skyblue;
padding-top: 80px;
opacity: 0.5;
}
.z2 {
background: yellow
}
.z3 {
background: red;
}
.z4 {
background: green;
}
.z5 {
background: pink;
}
</style>
<body>
<div class="fu">
<div class="z2">The container is not set to any float and the background is yellow</div>
<div class="z3">The container has no float set and the background is red</div>
<div class="z1">Opacity is set to 0.5 for a floating element</div>
<div class="z4">The container is not set to any float and the background is green</div>
<div class="z5">The container is not set to any float and the background is pink</div>
</div>
</body>
</html>
Copy the codeThe renderings are as follows:
It is clear from the annotations and instructions in the figure that float does not affect the previously rendered document, but the document to be rendered after it. So the question is, how do you eliminate the effect of z1 floating on Z4 and Z5?
First of all, we need to know what effects the float of Z1 has caused. The effects are as follows:
The first impact: it affected the layout of z4 and Z5.
The second influence is that the height of the parent container is affected. The height of the normal parent element is self-adaptive and is the total height of its contents, while the floating of internal elements causes the height collapse of the parent container.
Third effect: The height of the parent container collapse will affect the layout of the document at the same level as the parent element.
The following code perfectly illustrates these effects:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clear float</title>
</head>
<style>
.z1{
height: 200px;
width: 200px;
box-sizing: border-box;
float: left;
text-align: center;
background: skyblue;
padding-top: 80px;
opacity: 0.5;
}
.z2 {
background: yellow
}
.z3 {
background: red;
}
.z4 {
background: green;
}
.z5 {
background: pink;
}
.z6 {
color: #fff;
background: black;
}
.z7 {
color: #fff;
background: blue;
}
.fu {
/* overflow: hidden; * /
}
</style>
<body>
<div class="fu">
<div class="z2">The container is not set to any float and the background is yellow</div>
<div class="z3">The container has no float set and the background is red</div>
<div class="z1">Opacity is set to 0.5 for a floating element</div>
<div class="z4">The container is not set to any float and the background is green</div>
<div class="z5">The container is not set to any float and the background is pink</div>
</div>
<div class="z6">The container at the same level as the parent element has no float set and a green background</div>
<div class="z7">The container at the same level as the parent element has no float set and a green background</div>
</body>
</html>
Copy the codeThe renderings are as follows:
Solution is very important
To address these three impacts, we need to think in two directions:
The first direction: resolving the impact of a parent element on its sibling, which I liken to resolving external conflicts.
The second direction is to resolve the impact of floating elements within a parent element on its siblings, which I liken to resolving internal conflicts.
As the saying goes, domestic dirty laundry should not be aired in public, so let’s solve the external conflict first, how to solve it, the idea of solving is nothing more than to let the height of the parent element no longer collapse, the height of the floating element into the account. Remember the key point, at this point, internal conflict still exists. For example, floating elements have high overlap with their successors.
Resolve external conflicts
Trigger landing
The first one is to trigger the BFC. Why? Because once the BFC is triggered, the height will include the height of the floating element. To trigger this, you can set overflow:auto; I won’t talk about other ways to trigger the BFC, but I’ll focus on the principle. The following code
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clear float</title>
</head>
<style>
.z1{
height: 200px;
width: 200px;
box-sizing: border-box;
float: left;
text-align: center;
background: skyblue;
padding-top: 80px;
opacity: 0.5;
}
.z2 {
background: yellow
}
.z3 {
background: red;
}
.z4 {
background: green;
}
.z5 {
background: pink;
}
.z6 {
color: #fff;
background: black;
}
.z7 {
color: #fff;
background: blue;
}
.fu {
overflow: hidden;
}
</style>
<body>
<div class="fu">
<div class="z2">The container is not set to any float and the background is yellow</div>
<div class="z3">The container has no float set and the background is red</div>
<div class="z1">Opacity is set to 0.5 for a floating element</div>
<div class="z4">The container is not set to any float and the background is green</div>
<div class="z5">The container is not set to any float and the background is pink</div>
</div>
<div class="z6">The container at the same level as the parent element has no float set and a green background</div>
<div class="z7">The container at the same level as the parent element has no float set and a green background</div>
</body>
</html>
Copy the codeThe renderings are as follows:
The clear principle
Add a pseudo-element to the parent element:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clear float</title>
</head>
<style>
.z1{
height: 200px;
width: 200px;
box-sizing: border-box;
float: left;
text-align: center;
background: skyblue;
padding-top: 80px;
opacity: 0.5;
}
.z2 {
background: yellow
}
.z3 {
background: red;
}
.z4 {
background: green;
/* clear: left */
}
.z5 {
background: pink;
}
.z6 {
color: #fff;
background: black;
}
.z7 {
color: #fff;
background: blue;
}
.fu{}.clearfix:after {
display: block;
overflow: hidden;
content: 'Pseudo-element content oh';
clear: both;
height: 0;
background: slateblue;
}
</style>
<body>
<div class="fu clearfix">
<div class="z2">The container is not set to any float and the background is yellow</div>
<div class="z3">The container has no float set and the background is red</div>
<div class="z1">Opacity is set to 0.5 for a floating element</div>
<div class="z4">The container is not set to any float and the background is green</div>
<div class="z5">The container is not set to any float and the background is pink</div>
</div>
<div class="z6">The container at the same level as the parent element has no float set and a green background</div>
<div class="z7">The container at the same level as the parent element has no float set and a green background</div>
</body>
</html>
Copy the codeA lot of people don’t know how to use a pseudo-element to clear floats, and why adding this pseudo-element to a parent element can clear floats of the parent element. Here I deliberately put some text in the content of the fake element and added a background color, kind of gay…
OK, first look at the overall effect:
display:block
height
content
content
content
' '
height
overflow
height
overflow
content
content
Here are two screenshots of the most important points:
content
The core principle behind the pseudo-element cleanup float is to add a block-level container to the parent element while setting the block-level containerclearProperty to clear its own float so that it is normally arranged under the floating elements in the block-level container arrangement. At the same time, the sibling elements of the parent element are normally arranged after the block-level elements formed by the pseudo-element, without being affected by the float.
Here is a screenshot after the Clear attribute is disabled:
Add a block-level child to the parent element, which of course is the last block-level child of the parent element. We also set the clear property for the block-level child to clear its float, so that the child can be arranged behind the float element and the height of the parent element is raised. The sibling elements of the parent element can also be arranged properly. Therefore, the child container cannot have height and content, otherwise it will affect the layout of the parent element.
At this point, the solution of external contradictions and their respective principles have been stated very clearly. So how to solve the internal conflict?
In fact, the principle of resolving internal contradictions and resolving external contradictions in the second way is the same principle, by the first element affected by the float to clear the float, you can make the following elements will not be affected by the float. The code is as follows:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clear float</title>
</head>
<style>
.z1{
height: 200px;
width: 200px;
box-sizing: border-box;
float: left;
text-align: center;
background: skyblue;
padding-top: 80px;
opacity: 0.5;
}
.z2 {
background: yellow
}
.z3 {
background: red;
}
.z4 {
background: green;
clear:both;
}
.z5 {
background: pink;
}
.z6 {
color: #fff;
background: black;
}
.z7 {
color: #fff;
background: blue;
}
</style>
<body>
<div class="fu">
<div class="z2">The container is not set to any float and the background is yellow</div>
<div class="z3">The container has no float set and the background is red</div>
<div class="z1">Opacity is set to 0.5 for a floating element</div>
<div class="z4">The container is not set to any float and the background is green</div>
<div class="z5">The container is not set to any float and the background is pink</div>
</div>
<div class="z6">The container at the same level as the parent element has no float set and a green background</div>
<div class="z7">The container at the same level as the parent element has no float set and a green background</div>
</body>
</html>
Copy the codeThe renderings are as follows:
Set the inner element to clear:both; After the float is cleared, internal and external contradictions are resolved directly. One might wonder, what if there’s a floating element behind the z4 container, and I’m not going to explain it here, because the recursion works the same way, but I’ll do it in the last code:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clear float</title>
</head>
<style>
.z1{
height: 200px;
width: 200px;
box-sizing: border-box;
float: left;
text-align: center;
background: skyblue;
padding-top: 80px;
opacity: 0.5;
}
.z2 {
background: yellow
}
.z3 {
background: red;
}
.z4 {
background: green;
clear:both;
}
.z5 {
background: pink;
/* clear:both */
}
.z6 {
color: #fff;
background: black;
}
.z7 {
color: #fff;
background: blue;
}
.fu {
overflow: auto;
}
</style>
<body>
<div class="fu">
<div class="z2">The container is not set to any float and the background is yellow</div>
<div class="z3">The container has no float set and the background is red</div>
<div class="z1">Opacity is set to 0.5 for a floating element</div>
<div class="z4">The container is not set to any float and the background is green</div>
<div class="z1">Opacity is set to 0.5 for a floating element</div>
<div class="z5">The container is not set to any float and the background is pink</div>
</div>
<div class="z6">The container at the same level as the parent element has no float set and a green background</div>
<div class="z7">The container at the same level as the parent element has no float set and a green background</div>
</body>
</html>
Copy the codeThe renderings are as follows:
Parent element does not clear float, external contradictions, internal contradictions exist
The parent element uses BFC to clear the float, the external conflict is resolved, and the internal conflict remains
The float is cleared by setting clear to the first sibling block-level element after the float element in the parent element. Internal contradictions are resolved, and external contradictions are resolved.
For clear and left and right, this will not say, API matters, normal both can be. That’s it. I’m almost done. A final summary:
Different businesses may need different ways to clear the float. No matter which way you choose, you cannot avoid external contradictions and internal contradictions. Your business needs to keep internal contradictions, only solve external contradictions, or solve both external contradictions and internal contradictions. These need to be determined according to the characteristics of the business. Secondly, whether to use BFC or clear or pseudo-element, and which way to trigger if BFC is used. It also depends on the characteristics of the business.
The lovely statement at the end of the article: if forwarding or quoting, please attach the original link, respect for the achievement of the work completed by staying up late 😂. This article may have some mistakes, welcome comments pointed out, also welcome to discuss. Please forgive me if the article may not be good enough. In order to the front end, I also worry broken heart, life is short, I learn the front end, a little more contribution, more than a separate heart ~