Three ways to clear floating and their principles
Features of floating elements
Floating elements break away from the document flow and do not occupy space. The floated element stops when it hits its containing border or the border of the floated element.
Problems caused by floating elements
Because the floating element is out of the document flow, its height cannot be known for its parent element in the normal document flow, resulting in the collapse of the height of the parent element itself (losing the height occupied by the floating element).
Three ways to clear floats
Set float
overflow:hidden;
<div style="overflow:hidden;zoom:1;">
<p style="float: left;">使用overflow:hidden 清除浮动</p>
</div>
Among them, zoom: 1; is used for compatibility with IE6.
clear:both;
<style>
.clearfix:after{ /*START actually clears the floating code*/ content: ''; display: block; clear: both; /*END actually clears the floating code*/ height:0; } .clearfix{display: inline-block;} /* for IE/Mac */ </style> <div class="clearfix "> < div style="float: left;">clear:both ;son div</div> </div> Clearing floating essentially means clearing some of the effects of floating elements (such as height collapse). In the above example, we added the clear:both; attribute to the :after pseudo-element. In order to explain the function of this attribute, let's look at the following piece of code.
<div style="width: 150px; border: 1px solid #ccc;">
<div style="width: 100px; background: greenyellow;">div1</div>
<div style="width: 100px; background: blueviolet; float:left;">div2</div>
<div style="width: 120px; background: grey; clear:left;"></div>
</div>
<div style="width: 150px; border: 1px solid #ccc; margin-top: 20px;">
<div style="width: 100px; background: greenyellow;">div1</div>
<div style="width: 100px; background: blueviolet; float:left;">div2</div>
<div style="width: 120px; background: grey; "></div>
</div>
clear: left; will allow the element to follow the floating element on its left, without ignoring the previous floating element, which is behind the floating element. Similarly, clear:right; will clear the influence of floating elements on the right side of the element. And clear:both; is to clear the influence of the left and right sides.
Another way position: absolute;
This way is not recommended, because it needs to change the position attribute of the parent element itself. Maybe in some cases you can modify. But what if you can't modify it? ?
<div style="position:absolute;">
<div style="float: left;">postion:absolute clear float</div> </div> The
reason
why this method is mentioned is to explain the principle of the previous two methods (setting float and overflow:hidden;) to clear floating: when the overflow:hidden attribute is set for the parent element, in fact the parent element itself forms a BFC (Block Formatting Context).
An independent block-level context can wrap the floating flow, and all floating sub-elements will not cause the height of the container to collapse, that is to say, the containing block will also calculate the height of the floating element, so there is no need to clear the floating to support the height of the containing block.
Form a BFC situation:
The float attribute of the root element
is not none,
the position is absolute or fixed
display is inline-block, table-cell, table-caption, flex, inline-flex
overflow is not visible
——————————————————