Home >Web Front-end >CSS Tutorial >A brief discussion on the usage of css to clear floating clearfix and clear
The following editor will bring you a brief discussion on the usage of CSS clear float (clearfix and clear). The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Let’s follow the editor and take a look.
This article mainly explains how to use clearfix and clear in html, for those children who have just started to understand css. I won’t write about the styles of clearfix and clear here.
Let’s talk about the usage of these two classes. First, let’s look at an example:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8"/>
<title>如何在html中使用clearfix和clear</title>
<link rel="stylesheet" type="text/css" href="/css/base.css" media="all"/>
<style type="text/css">
.fl{float:left;}
.demo{background:#ccc;}
.item1{background:#f90;height:100px;width:100px;}
.item2{background:#fc0;height:200px;width:100px;}
</style>
</head>
<body>
<p class="demo">
<p class="fl item1"></p>
<p class="fl item2"></p>
</p>
</body>
</html>We all know that using floats will cause many unknown problems. Through the above examples we can It is found that the height of class="demo" is not stretched by the p inside. This is because the p inside floats and breaks away from the document. Because the demo itself has no height, we cannot see its gray background. Of course, just give the demo a height, but this deviates from the purpose of this article (sometimes we want the height of the outer p to be determined by the content inside).
Since it is a problem caused by floating, then just clear the floating. I believe experts have many methods to clear floating, such as overflow:hidden. Below I will introduce using clearfix and clear to clear floats.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8"/>
<title>如何在html中使用clearfix和clear</title>
<link rel="stylesheet" type="text/css" href="/css/base.css" media="all"/>
<style type="text/css">
.fl{float:left;}
.demo{background:#ccc;}
.item1{background:#f90;height:100px;width:100px;}
.item2{background:#fc0;height:200px;width:100px;}
</style>
</head>
<body>
<h2>用 clear 清除浮动</h2>
<p class="demo">
<p class="fl item1"></p>
<p class="fl item2"></p>
<p class="clear"></p>
</p>
<h2>用 clearfix 清除浮动</h2>
<p class="clearfix demo">
<p class="fl item1"></p>
<p class="fl item2"></p>
</p>
</body>
</html>We found that clearfix is mainly used on the parent layer of the floating layer, while clear is mainly used between the floating layer and the floating layer, and is at the same level as the floating layer. If you want To expand the height of the parent layer, clear should be placed at the end.
It is difficult to say which of these two methods is better. We can only say that specific needs should be treated in detail.
Related articles:
In-depth analysis of clearfix to clear floats
In-depth understanding of the usage of clearfix in css
CSS about clearfix clearing floating method
The most comprehensive CSS clearfix clearing floating method
The above is the detailed content of A brief discussion on the usage of css to clear floating clearfix and clear. For more information, please follow other related articles on the PHP Chinese website!