How to clear floating example code in css
|
Overview The framework diagram of this article is as follows:
1. What exactly is floating? The definition of floating given in W3school is that the floating box can move left or right until its outer edge touches the border of the containing box or another floating box. Because the floated box is taken out of the normal flow of the document, block boxes in the normal flow of the document behave as if the floated box did not exist.
In non-IE browsers (such as Firefox), when the height of a container is auto and there are floating elements (float is left or right) in the container's content, the height of the container cannot automatically stretch to adapt to the height of the content, causing the content to overflow outside the container and affect (or even destroy) the layout. This phenomenon is called floating overflow. The CSS processing performed to prevent this phenomenon is called CSS clearing floats. 2.What are the characteristics of floating? The characteristics of floating can be summarized in eight words: label separation, edge adhesion, character perimeter and shrinkage. For better explanation, please see the following figure: If you float all three boxes to the left, then box 1 floats to the left until it hits the containing box, and the other two boxes float to the left until they hit the previously floated box.
The following focuses on the fourth characteristic - contraction A floated inline element (such as a span img tag) can have its width set without setting display:block.
<style>
div{
float: left;
background-color: greenyellow;
}
</style>
</head>
<body>
<div>
This is a paragraph of text</div>
</body>The following results are obtained:
We all know that the div tag is a block-level element and will occupy a single line. However, in the above example, after the div is set to float left, its width no longer occupies a full line, but is tightened to the width of the internal element. This is the meaning of the fourth characteristic of floating. 3. What are the disadvantages of floating? Let’s look at the following code first:
<style>
.parent{
border: solid 5px;
width:300px;
}
.child:nth-child(1){
height: 100px;
width: 100px;
background-color: yellow;
float: left;
}
.child:nth-child(2){
height: 100px;
width: 100px;
background-color: red;
float: left;
}
.child:nth-child(3){
height: 100px;
width: 100px;
background-color: greenyellow;
float: left;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>We want the parent container to wrap the three floating elements, but the result is the following:
This is the side effect of floating - the height of the parent container collapses, so cleaning up the float is obviously crucial. 4. How to clean up floats? Clearing floats does not mean removing floats. Clearing floats causes the height of the parent container to collapse. Routine 1: Add height to the parent element of the floating element (poor scalability) If an element is to float, then its parent element must have a height. Only a box of a certain height can contain the floating. You can set the height of the parent element directly. In actual applications, it is unlikely that we will add height to all boxes, which is not only troublesome, but also cannot adapt to the rapid changes of the page. Alternatively, the height of the parent container can be expanded by the content (such as img pictures). This method is more commonly used in practice. Routine 2: clear:both; Add the last redundant element to the last child element, and then set it to clear:both, so that the floating can be cleared. One point to emphasize here is that the element added at the end of the parent element must be a block-level element, otherwise it will not be able to support the height of the parent element.
<div id="wrap">
<div id="inner"></div>
<div style="clear: both;"></div>
</div>
#wrap{
border: 1px solid;
}
#inner{
float: left;
width: 200px;
height: 200px;
background: pink;
}Routine 3: Pseudo-element clearing float The above method can certainly clear the float, but we don’t want to add these meaningless redundant elements to the page. How can we clear the float at this time?
<div id="wrap" class="clearfix">
<div id="inner"></div>
</div>
#wrap {
border: 1px solid;
}
#inner {
float: left;
width: 200px;
height: 200px;
background: pink;
}
/*Turn on haslayout*/
.clearfix {
*zoom: 1;
}
/*IE6 7 does not support pseudo elements*/
.clearfix:after {
content: '';
display: block;
clear: both;
height:0;
line-height:0;
visibility:hidden; // Allow the browser to render it, but not display it}Add a clearfix class to the parent container of the floating element, and then add an :after pseudo-element to this class to add an invisible block element to the end of the element to clear the float. This is a general solution for cleaning floats, recommended Routine 4: Use overflow:hidden for the parent element; This solution allows the parent container to form a BFC (block formatting context), and BFC can contain floats, which is usually used to solve the problem of height collapse of floating parent elements. How to trigger BFC We can trigger BFC by adding the following attributes to the parent element:
You can set overflow:auto for the parent element here, but for compatibility with IE it is best to use overflow:hidden. But this method has a flaw: if some content goes out of the box, this method will cut off the excess part, so it cannot be used at this time. Main features of BFC:
The br tag has one attribute: clear. This attribute is a powerful tool for clearing floats. Set the attribute clear in the br tag and assign a value of all. That will clear the float.
<div id="wrap">
<div id="inner"></div>
<br clear="all" />
</div>
#wrap {
border: 1px solid;
}
#inner {
float: left;
width: 200px;
height: 200px;
background: pink;
}If you find this article helpful, please like and follow my GitHub blog. Thank you very much! The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: HTML tags: sub tag and sup tag
>>: Use Visual Studio Code to connect to the MySql database and query
Recommend
Solve the problem that element edit form el-radio cannot be selected after echoing
Table of contents Preface question Online solutio...
Summary of changes in the use of axios in vue3 study notes
Table of contents 1. Basic use of axio 2. How to ...
Implementation of Vue counter
Table of contents 1. Implementation of counter 2....
Detailed explanation of several ways to remove the gap between inline-block elements in CSS
Recently, when working on mobile pages, inline-bl...
TimePicker in element disables part of the time (disabled to minutes)
The project requirements are: select date and tim...
Detailed explanation of the difference between var, let and const in JavaScript
Table of contents As a global variable Variable H...
Detailed explanation of why v-if and v-for in Vue are not recommended to be used together
This article mainly introduces why v-if and v-for...
Solve the problem that Docker pulls MySQL image too slowly
After half an hour of trying to pull the MySQL im...
How to view Linux ssh service information and running status
There are many articles about ssh server configur...
Analyze the problem of transferring files and other parameters in the upload component of element-ui
Recently, I used vuethink in my project, which in...
How to automatically execute the task schedule crontab every few minutes in a specified time period on Linux
Look at the code first #/bin/sh datename=$(date +...
How to use the debouce anti-shake function in Vue
Table of contents 1. Anti-shake function 2. Use d...
Design theory: people-oriented design concept
<br />When thoughts were divided into East a...
Summary of nginx configuration location method
location matching order 1. "=" prefix i...
ByteDance interview: How to use JS to implement Ajax concurrent request control
Preface To be honest, I've been feeling very ...