清除浮动的4种方式

css的三种定位机制: 文档流，浮动，定位

html,相当重要的概念，在网页中，标签从上至下，从左至右，。比方块级元素，行内元素的默认排序我们称之为普通流。这种布局方式称之为普通流布局

浮动(float)

浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果。

后来，发现浮动可以让任何盒子同一行显示，渐渐偏离主题，只有就一直用浮动进行布局

什么是浮动？

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

浮动的特性
1.盖不住的文本
2.浮动元素后面不是块级元素，后面的元素将会和它并排（除非设置了元素的宽度，并且屏幕放不下时将会换行）
3.浮动元素的上一个元素如果没有浮动，浮动只在当前行浮动；当浮动遇到浮动，它们将在一行排序，除非没有位置了
4.当元素设置定位值为absolute、fixed时，浮动将被忽略
5.float引起父元素高度塌陷
6.浮动元素会被后一个元素的margin-top影响

清除浮动的三种方式

**1.额外标签法**
在浮动的元素后面加一个**空的DIV** 添加属性  clear: both;

**2.伪元素清除浮动**
给要清除的浮动对象的父元素添加一个伪元素,content内容为"."，设置可见性visibility为hidden，高度设置为0，样式改为块级元素,清除浮动
.clearfix:after {
		content: ".";  /*内容为.    不要为空是因为旧版本浏览器可能会有空隙*/
		display: block; /*转换成块级元素*/
		height: 0;
		visibility: hidden;
		clear: both;
	}
	.clearfix {
		*zoom: 1;
		/*  
			*ie6,7能识别的符号，zoom ie6，7清除浮动的方法
		*/
	}
	3.双伪元素清除浮动
给要清除的浮动的父元素添加两个伪元素，内容为“.”，样式为block，然后清除伪元素的浮动 clear:both

.clearfix:before, .clearfix:after {
content: “”;
display: block;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
/
*ie6,7能识别的符号，zoom ie6，7清除浮动的方法
*/
}
4.给父元素添加overflow

浮动的本质

https://blog.51cto.com/stark/909627