A brief discussion on the usage of css to clear floating clearfix and clear-CSS Tutorial-php.cn

A brief discussion on the usage of css to clear floating clearfix and clear

高洛峰

Release： 2017-03-17 16:33:51

Original

1996 people have browsed it

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>

Copy after login

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>

Copy after login

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.

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!