css 浮动

float

        用于创建浮动框、将其移动到一边，直到触碰到左右边缘或另一个浮动框的边缘。

        应用：多个块元素在一行内排列显示。

        float :none | left | right;

特性：

1、脱离普通流的控制移动到指定位置，简称脱标。

2、如果父盒子装不下浮动的盒子，多出来的会另起一行对齐。

3、具有行内块特性，浮动的盒子不再保留原先位子。

 

清除浮动

        在实际情况中不清楚有多少个小盒子，所以父盒子不方便给高度，但是小盒子浮动不占有位置，无法撑开父盒子，导致父盒子高度为零，会影响到后面的标准盒子。

        本质：清除浮动造成的影响，父盒子有高度则不需要清除，清除后，父盒会根据子盒自检高度。

        clear : left | right | both（两个都清除）；

        由于浮动的盒子不保留当前位置，所以后面的标准流盒子会顶上去，造成重叠的结果，在跟着浮动屁股后面的盒子加上 clear：both；就恢复正常了。

闭合浮动

1、额外标签法：

在浮动末尾加一个空的块级标签，<div style = "clear : both"></div>.

缺点是加太多无意义的标签，结构化较差。

2、父标签添加 overflow 属性 overflow : hidden |  auto | scroll ;

缺点：无法显示溢出的部分。

3、父标签加 after 伪元素（标签法升级）。

.clearfix::after{
			content: "";
			display: block;
			height: 0;
			clear: both;
			visibility: hidden;
		}
		.clearfix{
			*zoom:1;
		}

缺点：需要照顾低版本浏览器。

4、双伪元素

.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom:1;
}

缺点跟3一样