Home  >  Article  >  Web Front-end  >  Introduction to clear floats and closed floats

Introduction to clear floats and closed floats

不言
不言forward
2019-02-28 13:21:123202browse

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!

Statement:
This article is reproduced at:segmentfault.com. If there is any infringement, please contact admin@php.cn delete