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>清除浮动</h1>
<div class="border-div clear">
    <div class="div1">

    </div>
    <div class="div2">

    </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 class="main">
    <div class="sub"></div>
    <div class="sub"></div>
    <div style="clear:both"></div>
</div>

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

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

<div class="main">
    <div class="sub"></div>
    <div class="sub"></div>
    <br clear="all">
</div>

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

<div class="main">
    <div class="sub"></div>
    <div class="sub"></div>
</div>

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

<div class="main">
    <div class="sub"></div>
    <div class="sub"></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!