Three ways to clear floats

1. When do I need to clear the float? What are the ways to clear floats?

(1) After the element is floated, the element will be separated from the document flow and float on the document. In CSS, any element can float. A floated element generates a block-level box, regardless of what kind of element it is.

Float is mainly popular with page layout, and then if you don't clear the float after use, you will have endless troubles.

First look at the example:

<div class="outer">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>

.outer{ border:1px solid #ccc; background:#fc9; color:#fff; margin:50px auto; padding:50px;}
.div1{ width:80px; height:80px; background:#f00; float:left; }
.div2{ width:80px; height:80px; background:blue; float:left; }
.div3{ width:80px; height:80px; background:sienna; float:left; }

As shown in the figure above, it is caused by floating the three elements 1, 2, and 3.

Let's take a look, if these three elements do not float, what will it look like?

.outer{ border:1px solid #ccc; background:#fc9; color:#fff; margin:50px auto; padding:50px;}
.div1{ width:80px; height:80px; background:#f00; /*float:left;*/ }
.div2{ width:80px; height:80px; background:blue;/* float:left; */}
.div3{ width:80px; height:80px; background:sienna;/* float:left;*/ }

As shown in the figure above, when the 1/2/3 elements of the inner layer are not floating, the height of the outer layer elements will be automatically stretched.

So when the inner element floats, the following effects occur:

The background cannot be displayed; the border cannot be stretched; the margin setting value cannot be displayed correctly.

2. Clear the float

Method 1: Add a new element and apply clear:both;

<div class="outer">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="clear"></div>
</div>

.outer{ border:1px solid #ccc; background:#fc9; color:#fff; margin:50px auto; padding:50px;}
.div1{ width:80px; height:80px; background:#f00; float:left; }
.div2{ width:80px; height:80px; background:blue; float:left; }
.div3{ width:80px; height:80px; background:sienna; float:left; }
.clear{ clear:both; height:0; line-height:0; font-size:0; }

方法二：父级div定义 overflow:auto;（主意：是父级div，也就是这里的 div.outer）。

<div class="outer over-flow">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>

.outer{ border:1px solid #ccc; background:#fc9; color:#fff; margin:50px auto; padding:50px;}
.div1{ width:80px; height:80px; background:#f00; float:left; }
.div2{ width:80px; height:80px; background:blue; float:left; }
.div3{ width:80px; height:80px; background:sienna; float:left; }
.over-flow{ overflow:auto; zoom:1;  } //zoom:1;是在处理兼容性问题

原理：使用overflow属性来清除浮动有一点需要注意，overflow属性共有三个属性值：hidden，auto，visible。我们可以使用hidden和auto值来清除浮动，但切记不能使用visible值，如果使用这个值，将无法达到清除浮动效果，其他两个值都可以。

overflow 属性规定当内容溢出元素框时发生的事情。

方法三：据说最高大上的方法，:after方法。（注意：作用于浮动元素的父亲）。

原理：利用:after和:before来在元素内部插入两个元素块，从而达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于:clear在html中插入一个div.clear标签，而outer利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。

.outer { zoom:1; } //为了兼容性，因为ie6/7不能使用伪类，所以加上此行代码。
.outer:after { clear:both;content:'';display:block;width:0;height:0;visibility:hidden; }

where clear:both; means to clear all floats; content: ' . '; display: block; cannot be missing for FF/Chrome/opera/IE8, and the value of content() can also be empty. The effect of visibility:hidden; is to allow the browser to render it, but not show it, so that the float can be cleared.

Using pseudo-elements, you can no longer add tags to HTML.

:after means that the last element inside .outer is added as element :after,

First to display the pseudo-element, so display:block,

Then add empty content to the pseudo-element, so that no content will be displayed on the page in the pseudo-element, so, content:"";

Secondly, in order to make the pseudo element not affect the page layout, set the pseudo element height to 0, so, height: 0,

Finally, to clear the float, so, clear:both.

tips:

The content property is used in conjunction with the :before and :after pseudo-elements to insert generated content.