CSS clear float

I. thinking questions

The floating element in front of us has a parent element of the standard flow. They have a common feature, and they all have a height.

However, do all parent boxes have to have a height?

Answer: not necessarily! For example, for a product list, the number of products varies with the period, and the size of the box required will change accordingly. Therefore, it is obviously not feasible to directly fix the height of the box. For example, for boxes such as articles, the number of words in different articles is different. Obviously, the box cannot be directly fixed.

In the ideal state, let the child box open the father. My father's box is as tall as there are children.

But is it a problem not to give the height of the parent box?

Answer: Yes! But there is a solution (clear the float).

2. Why do I need to clear the float?

In many cases, it is inconvenient to give the height of the parent box, but the child box floats and does not occupy a position. When the height of the parent box is 0, the following standard flow boxes will be affected.

  • Since the floating element no longer occupies the position of the original file stream, it will affect the layout of subsequent elements

  • At this time, once there are other boxes under the parent box, the layout will be seriously confused!

Three clear floating essence

  • The essence of clearing floating is to clear the influence caused by floating elements
  • If the parent box itself has a height, you do not need to clear the float
  • After floating is cleared, the parent will automatically detect the height according to the floating sub box. If the parent has a height, it will not affect the following standard flow
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
        }

        .bottom {
            height: 100px;
            background-color: green;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <!-- Parent child label, Child float, Parent has no height, The following standard flow box will be affected, Display to above position -->
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

IV. clear floating

Syntax:

selector { clear: Attribute value; }
Attribute valuedescribe
leftFloating elements on the left are not allowed (clear the influence of floating on the left)
rightFloating elements on the right are not allowed (clear the influence of floating on the right)
bothAt the same time, the influence of left and right side floats is eliminated

In our actual work, we almost only use clear: both;

The strategy to clear floating is to close floating.

V. clear floating method

  1. The additional labeling method, also known as the partition method, is recommended by W3C. (not recommended for actual development)
  2. Add overflow attribute to parent
  3. Add after pseudo element to parent
  4. Add double pseudo element to parent

Vi. clear floating - additional labeling method

The additional labeling method, also known as the partition method, is recommended by W3C.

Extra tagging adds an empty tag to the end of the floating element. For example, <div style= "clear: both" > </div>, or other labels (such as <br>).

  • Advantages: easy to understand and write
  • Disadvantages: many meaningless labels are added, and the structure is poor

Note: this new empty tag must be a block level element.

Summary:

  • What is the essence of clearing floating?

The essence of clearing floating is to clear the influence caused by floating elements leaving the standard flow.

  • Clear floating policy yes?

Closed float. Let the float only affect the inside of the parent box, and do not affect other boxes outside the parent box.

  • Additional labeling?

The partition method is to add an extra empty label (block level label) after the last floating child element and add a clear floating style.

It may be encountered in actual work, but it is not often used.

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Extra label method for clearing floating</title>
    <style>
        .box {
            width: 800px;
            border: 3px solid black;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: salmon;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }

        .footer {
            height: 200px;
            background-color: gray;
        }

        .clear {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao">Big hair</div>
        <div class="ermao">twenty fen</div>
        <div class="ermao">twenty fen</div>
        <div class="ermao">twenty fen</div>
        <div class="ermao">twenty fen</div>
        <div class="clear"></div>
        <!-- This new box must be a block level element, not an inline element -->
        <!-- <span class="clear"></span> -->
    </div>
    <div class="footer"></div>

</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
        }

        .bottom {
            height: 100px;
            background-color: green;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }

        .clearfix {
            /* Clear the influence of left and right floats */
            clear: both;
        }
    </style>
</head>
<body>
    <!-- Parent child label, Child float, Parent has no height, The following standard flow box will be affected, Display to above position -->
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
        <div class="clearfix"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

VII. Clear floating - add overflow to parent

You can add the overflow attribute to the parent and set its attribute value to hidden, auto, or scroll.

If the child doesn't teach, the father's fault. Pay attention to adding code to the parent element.

  • Advantages: simple code
  • Disadvantages: overflow parts cannot be displayed
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>overflow Clear float</title>
    <style>
        .box {
            /* Clear float */
            overflow: hidden;
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao">Big hair</div>
        <div class="ermao">twenty fen</div>
    </div>
    <div class="footer"></div>

</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;

            overflow: hidden;
        }

        .bottom {
            height: 100px;
            background-color: green;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <!-- Parent child label, Child float, Parent has no height, The following standard flow box will be affected, Display to above position -->
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

VIII. Clear floating: after pseudo element method

: the after method is an upgraded version of the additional tagging method and adds code to the parent element.

Principle: an inline box is automatically added at the end of the parent box. We convert it into a block level box to indirectly implement the additional label method.

.clearfix:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix { 
    /* IE6,7 proprietary */
	*zoom: 1;
}

Note: the class name does not have to be clearfix, but it is recommended to write it to improve readability.

  • Advantages: no label added, simpler structure
  • Disadvantages: lower version browsers need to be taken care of separately
  • Representative websites: Baidu, Taobao, Netease, etc
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Pseudo element clear float</title>
    <style>
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* IE6,7 proprietary */
            *zoom: 1;
        }

        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box clearfix">
        <div class="damao">Big hair</div>
        <div class="ermao">twenty fen</div>
    </div>
    <div class="footer"></div>

</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
        }

        .bottom {
            height: 100px;
            background-color: green;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }

        /* The principle of single pseudo element clear floating is the same as that of extra label method */
        .clearfix::after {
            content: '';

            /* The label added by the pseudo element is inline and requires a block */
            display: block;
            clear: both;

            /* For compatibility */
            height: 0;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <!-- Parent child label, Child float, Parent has no height, The following standard flow box will be affected, Display to above position -->
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
        <!-- adopt css Add label -->
    </div>
    <div class="bottom"></div>
</body>
</html>

IX. clear floating - Double pseudo element clear floating

An upgraded version of the extra tagging method is also used to add code to the parent element.

Principle: automatically add two in row boxes at both ends of the parent box, and convert them into tables, indirectly realizing the additional label method.

.clearfix:before,
.clearfix:after {
	content: "";
	display: table;
}

.clearfix:after {
	clear: both;
}

.clearfix {
    /* IE6,7 proprietary */
	*zoom:1;
}

Note: the class name does not have to be clearfix, but it is recommended to write it to improve readability.

  • Advantages: simpler code

  • Disadvantages: lower version browsers need to be taken care of separately

  • Representative websites: Xiaomi, Tencent, etc

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Double pseudo element clear float</title>
    <style>
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box clearfix">
        <div class="damao">Big hair</div>
        <div class="ermao">twenty fen</div>
    </div>
    <div class="footer"></div>

</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
        }

        .bottom {
            height: 100px;
            background-color: green;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }

        /*  .clearfix::before Function: solve the problem of collapse of outer margin
            Collapse of outer margin: the parent and child labels are block level. Adding margin to the child will affect the position of the parent
        */
        /* Clear float */
        .clearfix::before,
        .clearfix::after {
            content: '';
            display: table;
        }

        /* Really clear floating labels */
        .clearfix::after {
            /* content: '';
            display: table; */
            clear: both;
        }
    </style>
</head>
<body>
    <!-- Parent child label, Child float, Parent has no height, The following standard flow box will be affected, Display to above position -->
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

X. summary of clearing floating

Why do I need to clear floats?

  • Parent has no height
  • The sub box is floating
  • If the following layout is affected, we should clear the float
Clear floating modeadvantageshortcoming
Additional labeling method (partition method)Easy to understand and writeAdd a lot of meaningless labels, which are poorly structured
Parent overflow: hidden;Simple writingOverflow hide
Parent after pseudo elementCorrect semantic structureBecause IE6~7 does not support: after, compatibility problem
Parent double pseudo elementCorrect semantic structureBecause IE6~7 does not support: after, compatibility problem

The principle of after pseudo elements and double pseudo elements to clear floating will be explained in CSS3 later.

Tags: html css Front-end css3

Posted by bandit on Sun, 29 May 2022 23:35:33 +0530