Home > Article > Web Front-end > How to clear float? In html: Implementation of the method of clearing floating elements of after pseudo-element (code)
How to clear float? In html: Implementation of the method of clearing floating elements of after pseudo-element (code)
- 不言Original
- 2018-08-21 14:28:236085browse
The content of this article is about how to clear floating? The implementation of the method of clearing floating elements of :after pseudo-element in HTML (code) has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
The :after pseudo-element and the :before pseudo-element are used to add content after and before the element respectively. In the actual web development process, the :after pseudo-element is more commonly used. The :after pseudo-element is generally used for clearing. Floating, using pseudo elements to clear floats is one of the three methods of regular float clearing, and it is also the most commonly used and recommended method.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>：after清除浮动</title>
<style>
.out {
width:200px;
border: 5px solid red;
}
.out:after{
content: '';
display: block;
width: 0px;
height: 0px;
clear: left;
}
.in {
width: 100px;
height: 100px;
float:left;
}
</style>
</head>
<body>
<div class="out">
<div class="in" style="background-color: blue;"></div>
<div class="in" style="background-color: green;"></div>
</div>
</body>
</html>The effect is as shown:
Related recommendations:
Clear floating 1-use: after pseudo-element_html/ css_WEB-ITnose
##htmlExamples of 6 ways to clear floats_CSS/HTML
The above is the detailed content of How to clear float? In html: Implementation of the method of clearing floating elements of after pseudo-element (code). For more information, please follow other related articles on the PHP Chinese website!