What are the methods to clear floats?-CSS Tutorial-php.cn

What are the methods to clear floats?

清浅

Release： 2018-12-17 09:17:04

Original

59991 people have browsed it

The methods for clearing floats include clearboth, setting clearfix, overflow and setting double pseudo-elements to the parent element

When we write code, sometimes Because of the use of float elements, some elements on the page cannot be displayed correctly. In the following article, we will introduce several methods of clearing floats in detail. It has certain reference value and I hope it will be helpful to everyone.

【Recommended course: CSS course】

##Floating Consequences:

(1) Since the floating element is out of the document flow, the height of the parent element cannot be expanded, affecting elements at the same level as the parent element

(2) and Non-floated elements at the same level of the floating element will follow it, because the floating element leaves the document flow and does not occupy its original position
(3) If the floating element is not the first floating element, the elements before it also need to be floated , otherwise it will easily affect the structural display of the page

Example: Set three divs in one div, and let the three divs expand the parent element

<style>
    .box{border:1px solid #ccc;background:pink;}
    .red{width:100px;height:100px;background: red;}
    .green{width:100px;height:100px;background:green;}
    .blue{width:100px;height:100px;background: blue;}
</style>
<body>
<div class="box">
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
</div>

Copy after login

Rendering:

What are the methods to clear floats?

After adding float:left, the parent element cannot be opened

What are the methods to clear floats?

How to clear the float

(1) Use clear:both to clear floats

Put an empty div tag in the code, and then set clear:both to this tag to clear floats impact on the page. Its advantages are simplicity, convenience and good compatibility, but it is generally not recommended to use this method because it will cause structural confusion and is not conducive to later maintenance

<div style="clear: both"></div>

Copy after login

(2) Use pseudo-element clearfix to clear Float

Adds an :after pseudo-element to the parent element. By clearing the float of the pseudo-element, it achieves the purpose of supporting the height of the parent element

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

Copy after login

(3) Use of overflow method

When the overflow style is set to the parent element, whether it is overflow:hidden or overflow:auto, the float can be cleared as long as its value is not visible. Its essence is Constructed a BFC, which achieves the effect of supporting the height of the parent element

.box{border:1px solid #ccc;background:#eff2f4;overflow: auto}

Copy after login

(4) Use of double pseudo-element method

By giving the parent element Set up double pseudo elements to achieve the effect of clearing floats

 .clearfix:before,.clearfix:after {
     content: "";
     display: block;
     clear: both;
}

Copy after login

Summary: The above is the entire content of this article. I hope that through this article, everyone can understand the method of clearing floats

The above is the detailed content of What are the methods to clear floats?. For more information, please follow other related articles on the PHP Chinese website!