Introduction to clear floats and closed floats

This article brings you an introduction to clearing floats and closing floats. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Why should we clear the float

• The child element float:left; leaving the document flow will cause the parent element to collapse (unable to hold up)

• The parent element is supported by the child element

• Clear float clear:both

<h1 id="清除浮动">清除浮动</h1>
<div>
    <div>
        
    </div>
    <div>
        
    </div>
</div>


// 伪元素 :after
.clear:after{
    clear:both;
    content:".";
    display:table;
    width:0;
    height:0;
    visibility:hidden;
}

• Closed float - add additional elements clear:both

Parent element does not set height

子元素 float:left

额外增加元素 clear:both

<div>
    <div></div>
    <div></div>
    <div></div>
</div>

• Closed float--use br and Its own html attributes

==Note== clear=all Deprecated attributes (moz)

<div>
    <div></div>
    <div></div>
    <br>
</div>

• Close float-- The parent element sets overflow:hidden

<div>
    <div></div>
    <div></div>
</div>

• closed float -- the parent element sets display:table

<div>
    <div></div>
    <div></div>
</div>

The above is the detailed content of Introduction to clear floats and closed floats. For more information, please follow other related articles on the PHP Chinese website!