A floating box can be moved left or right until its outer edge touches the border of the containing box or another floating box, and is out of the flow of the document (so there will be overlays and issues with clearing the float, which I'll get into below )
for example:
There are pictures available:
When box 1 floats to the left, it breaks out of the document flow and moves to the left until its left edge touches the left edge of the containing box. Because it's no longer in the document flow, it doesn't take up space and actually covers box 2, making box 2 disappear from view
If you move all three boxes to the left, box 1 floats to the left until it hits the containing box, and the other two boxes float to the left until they hit the previous floated box
There is another situation:
It can also be obtained from the figure:
If the containing box is too narrow to accommodate the three floated elements arranged horizontally, the other floats move down until there is enough space. If floated elements have different heights, they may be "stuck" by other floated elements as they move down
【Clear floating】
As we said above, the element floats out of the flow of the document, so it does not take up space. There are two problems
①Element coverage; ②Clear float
Next, let's talk about clearing the float:
Because it doesn't take up space, there is a problem if the parent containing the floated element doesn't have a width and height defined. That is, the parent element is empty, and the intuitive effect of browser rendering is that the containing block does not enclose the floating element. Or called height collapse, that is, the height of the parent element of the floating element is adaptive (when the parent element does not write the height, after the child element writes the float, the height of the parent element will collapse)
After knowing the floating and why to clear the floating, we can start to learn how to clear the floating. At this time, we need to use the clearing property to clear the floating.
[Property value] The value of the clear property can be left, right, both or none, which indicates which sides of the box should not be next to the floating box
To achieve this effect, add enough space to the top margin of the element being cleaned up to achieve the effect
The specific methods of clear floating are mainly as follows:
1. Add empty div method
Add an empty div below the floating element and write css styles for the element:
{clear:both;height:0;overflow:hidden;}
2. Method: Set the height of the parent of the floating element
We know that the height collapse should be caused by the adaptive height of the parent of the floating element, then we can solve this problem by setting the appropriate height for it.
Disadvantage: Not applicable when the height of the floating element is uncertain
3、方法：以浮制浮（父级同时浮动）
何谓“以浮制浮”呢？就是让浮动元素的父级也浮动下一个元素会受到这个浮动元素的影响。为了解决这个问题，有些人选择对布局中的所有东西进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理
缺点：需要给每个浮动元素父级添加浮动，浮动多了容易出现问题
7、 br 清浮动
<div class="box">
<div class="top"></div>
<br clear="both" />
</div>
br 标签自带clear属性，将它设置成both其实和添加空div原理是一样的
缺点：不符合工作中：结构、样式、行为，三者分离的要求
5、给父级添加overflow:hidden
问题：需要配合 宽度 或者 zoom 兼容IE6 IE7；
在非ie 和 ie7及其以上版本的浏览器中，可以使用 overflow ：hidden 等方法来进行清除浮动，所以
【缺点】IE7以下版本不兼容
IE6对overflow属性的理解有误，说白了是IE6的一个bug，IE7开始已经修复这个问题，也就是说IE7/IE8下overflow:hidden可以清除浮动造成的影响
overflow: hidden; *zoom: 1;
这里涉及到一个概念：包裹
所谓包裹就是，容器自身的尺寸是按照被包容的元素决定的（包裹概念是从 张鑫旭 博客中学习到的）
事实上你只要理解，是因为IE的hasLayout和其他浏览器的overflow:hidden导致浮动元素重新占据了空间，那么一切就可以解释了
【哪些情况会发生包裹？】
比如行内框元素span包含文字
比如没有设置宽度和高度的一个浮动div块
比如没有设置宽度和高度的一个设置了display:inline的div
比如设置了display:inline-block的a标签
比如设置了overflow:hidden的元素
比如设置了position:absolute绝对定位的元素
它们的尺寸就由包容的元素决定
也就是说具有包裹性的有6种：
行内框，浮动，display:inline-block的行内框，display:inline的块框，overflow:hidden，position:absolute
但是overflow:hidden在IE6有BUG，必须触发hasLayout才可以
以上所说的清除浮动和通常的clear是不一样的，我们只是清除浮动造成的影响，更多的作用是让浮动重新占据空间。而clear则会在清除浮动后换行，作用是不一样的
6、万能清除法 after伪类 清浮动（现在主流方法，推荐使用）
:after{
content:".";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
同时为了兼容 IE6，7 同样需要配合zoom使用例如：
.clearfix:after{
content:".";/*加一段内容*/
display:block;/*让生成的元素以块级元素显示，占满剩余空间*/
height:0;/*避免生成的内容破坏原有布局高度*/
clear:both;/*清除浮动*/
visibility:hidden;/*让生成的内容不可见*/
}
.clearfix{zoom:1;/*为IE6，7的兼容性设置*/}
需要注意的东西：
after伪类： 元素内部末尾添加内容；
:after{content"添加的内容";} IE6，7下不兼容
zoom 缩放
a、触发 IE下 haslayout，使元素根据自身内容计算宽高。
b、FF 不支持；
【缺点】
zoom:1是解决IE6的办法，但是它不能通过w3c，所以我们可以用条件注释，这样就可以通过了。但是如果我们不想用条件注释呢？下面有方法
/*撑开父容器*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* 分别在两段 css 块中设置 这样可以不必使用zoom:1;又通过W3C，又不需要用条件注释*/
.clearfix {
display: inline-block;
}
.clearfix {
display: block;
}
还有个方法也可以通过W3C，而且【更简单】
/*撑开父容器*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* 或者给父容器height:1% 因为1%并不会改变实际高度 这样也可以通过W3C */
.clearfix {
height:1%;
}
【拓展】
zoom:1;属性是IE浏览器的专有属性，Firefox等其它浏览器不支持。它可以设置或检索对象的缩放比例。除此之外，它还有其他一些小作用，比如触发ie的hasLayout属性，清除浮动、清除margin的重叠等。
但很遗憾的是，它通不过W3C验证
zoom属性是IE浏览器的专有属性， 它可以设置或检索对象的缩放比例。
在平常的css编写过程中，zoom:1能够比较神奇地解决ie下比较奇葩的bug。
譬如外边距（margin）的重叠，譬如浮动的清除，譬如触发ie的 haslayout属性等等
Zoom属是IE浏览器的专有属性，火狐和老版本的webkit核心的浏览器都不支持这个属性。
然而，zoom现在已经被逐步标准化，出现在 CSS 3.0 规范草案中，也就是CSS3中的transform: scale这个属性来实现
Usage: When the child element floats under ie, the parent element does not automatically expand with the problem, use the following CSS notation
.parent element { overflow: auto; zoom: 1 }
【expand】
Regarding zoom:1; and the hasLayout attribute of IE, I will introduce it in a later article
.