Home > Article > Web Front-end > What is the code to clear floats in css3
The code is: 1. ".clear{clear:both}", stipulates that the elements do not float left and right; 2. "overflow:auto", sets the content to be trimmed to clear floating; 3. "Element: after{ display:table;}", set the element to be displayed as a block-level table, and clear the float when the remaining space is filled.
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
Method 1: Use empty elements with clear attributes
Use empty tags to clear floats : Add an empty tag (theoretically it can be any tag, but dc6dce4a544fdca2df29d5ac0ea9906b and e388a4556c0f65e1904146cc1a846bee are commonly used) after all floating elements inside the parent element that need to be cleared to clear the float, and define the CSS code clear for it: both.
Code example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.demo{
width: 500px;
margin: 50px auto;
background-color: #CCCCCC;
}
.left{
width: 100px;
height: 100px;
float: left;
background-color: #21B4BB;
}
.right{
width: 100px;
height: 50px;
float: right;
background-color: #21B4BB;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="demo">
<div class="left">left</div>
<div class="right">right</div>
<div class="clear"></div>
</div>
</body>
</html>Advantages: simple, less code, good browser compatibility.
Disadvantages: A large number of unsemantic html elements need to be added, the code is not elegant enough, and it is not easy to maintain later.
Method 2: Use the overflow property of CSS
Use overflow to clear floats: Just define the CSS code overflow:auto or overflow:hidden in the element where the float needs to be cleared. That’s it.
Code example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.demo{
width: 500px;
margin: 50px auto;
background-color: #CCCCCC;
overflow:hidden
}
.left{
width: 100px;
height: 100px;
float: left;
background-color: #21B4BB;
}
.right{
width: 100px;
height: 50px;
float: right;
background-color: #21B4BB;
}
</style>
</head>
<body>
<div class="demo">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>Advantages: There are no structural and semantic problems, and the amount of code is very small
Disadvantages: When the content increases, it is easy to cause automatic line wrapping, causing the content to be Hide it and cannot display the elements that need to overflow
Method 3: Use CSS’s :after pseudo-element
Use the :after pseudo-element for the parent element and set display:table .
display:table causes the generated elements to be displayed in a block-level table, occupying the remaining space.
Generate content as the last element through content: " ". As for the content in content, it can be anything. The classic CSS is content: ".". In some versions, the content in content may be empty.
Code example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.demo{
width: 500px;
margin: 50px auto;
background-color: #CCCCCC;
*zoom: 1;
}
.demo:after {
content: " ";
display: table;
clear: both;
}
.left{
width: 100px;
height: 100px;
float: left;
background-color: #21B4BB;
}
.right{
width: 100px;
height: 50px;
float: right;
background-color: #21B4BB;
}
</style>
</head>
<body>
<div class="demo">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>Disadvantages: suitable for modern browsers, does not support IE6/7, *zoom: 1 is to be compatible with IE6/7
(Learning video sharing: css video tutorial)
The above is the detailed content of What is the code to clear floats in css3. For more information, please follow other related articles on the PHP Chinese website!