浮动相关问题

在实际开发过程中，我们一般不给网页指定 height 属性值，都是有网页内容来撑起的。

问题描述：当我们使用了 float 时，浮动起来的元素将不在占据空间，因此当前元素的父级元素的排版就会发生变化.

解决方法：

1. 将父元素也浮动，使得父子到同一个层级
2. 修改元素的性质：display:inline-block;(ie678不支持)
3. 给元素添加 overflow:hidden;
   注意：子元素浮动，父元素立即添加 overflow:hidden;（变为BFC）
4. 在 IE678 下解决兼容性问题时，添加属性： zoom:1; 即可
5. 清除浮动：使用 clear 来清除上面元素造成的影响
6. 还可以通过伪元素选择器 :after 来清理浮动
   在需要清除的元素中添加如下：

/* 案例:通过 :after 动态添加空元素来清除浮动造成的影响，给需要清浮动的元素添加如下类 */
.clearfix:after{
	display:block;
	/*  content:"\20";   这样表示也可以，   \20 表示空格 */
	content:'';    /* 必须得写：并且为空，表示空，不显示 */
	overflow:hidden;  /* 超出隐藏 */
	clear:both;
	height:0;
}
.clearfix{       /* 浏览器兼容性的处理 */
	*zoom:1;    /* 该属性是ie的专有属性；* 表示识别不同版本的浏览器 */
}

使用 float 实现的图文效果：
可以实现文字围绕图片进行描述的效果。

<style type="text/css">
	.box{
		width: 400px;
		border: 1px solid pink;
	}
	.left{
		float:left;
		width: 80px;
		height: 80px;
		background: red;
	}
</style>
<div class="box">
	<div class="left">
		left
	</div>
	<div class="right">
		right
		前些天，我接到了去试驾蔚来ES6的任务，当然，对于电动车我一直坚持着自己的“古板”，但是自从蔚来ES8上市以来，不俗的销量足以证明大多数人都已经认可了这个新事物的存在；话归ES6，它相比ES8各方面都更加均衡，它的出现势必更加讨喜，对它抱着各种质疑的我，直到亲自踩下“电门”的瞬间才明白。
	</div>
</div>

效果如下：