css中浮动-----梅花

我们可以使用float：left；来使元素浮动，使文本脱离文档流，实现浮动
向左浮动float：left；
向右浮动：floa：right；
也可以可以使用display：inline；来达到使块元素在一行显示的效果，这样比较麻烦，没有浮动好用，但是我们在使用浮动给我们带来方便的同时，也给我们带来一定的影响，
通常情况下我们div是自上而下排列的

我们给第二个div加一个向左浮动，看看会怎么样呢？

第三个div不见了，我们继续给第三个div加上浮动，会发现

咦！出来了
对于浮动带来的影响，我们通常有四种办法解决
①给父元素加一个overflow：hidden；
②额外标签法：clearn：both；
③使用使用after伪元素清除浮动（没有兼容IE6-IE7）

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

④使用before和after双伪元素清除浮动（没有兼容IE6-IE7）

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