What is the code to clear floats in css3-Front-end Q&A-php.cn

What is the code to clear floats in css3

WBOY

Release： 2022-04-11 18:37:25

Original

4686 people have browsed it

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.

What is the code to clear floats in css3

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

What is the code for clearing floats in css3

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

and

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>

Copy after login

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>

Copy after login

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>

Copy after login

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!