浮动的本质是为了实现文字环绕效果。

float 布局有时也能满足我们的需求，但是实际上这种布局i一碰就碎。缺少弹性，布局的容错率很糟糕。float 特性：

  1. 包裹性

    • 包裹 ： 假设浮动元素父元素宽度为200px，浮动元素子元素是一个128px宽度的图片， 则此时浮动元素宽度表现为“包裹”，也就是里面图片的宽度128px。
    • 自适应性。如果浮动元素的子元素不只是一张 128px 宽度的图片，还有一大波普通的文字，则此时浮动元素宽度就自适应父元素的200px宽度，最终表现也为200px。

  2. 块状化并格式化上下文：

    • 元素一旦float 的属性不是none,则其diaplay计算值就是block,或者table.
    span{
	diaplay: block; /* 多余*/
	float:left;
}
span{
	float: left;
	vertival-align: middle; /* 多余 */
}

  3. 破坏文档流

  • float 属性有一个著名的特性表现，就是会让父元素的高度塌陷（如果父元素没有指明高度的话）。这是css的设计者设定的标准，以使得 float 一开始“只是为了实现文字环绕效果”的目标实现，也即 “破坏文档流”。当然，只是让高度塌陷还不够，这还需要另一个特性，那就是“行框盒子和浮动元素的不可重叠性”，也就是“行框盒子如果和浮动元素的垂直高度有重叠，则行框盒子在正常定位状态下只会跟随浮动元素，而不会发生重叠”。
  1. 没有任何margin合并



clear "己所不欲勿施于人"

官方解释 ： “元素盒子的边不能和前面的浮动元素相邻”，就是设置了 clear 属性的元素自身如何如何。而不是让float元素如何如何。

clear属性只有块级元素才有效，通常可以利用伪元素来完成清除浮动 :

.clear:after{
	content: '';
	diaplay: table; /*也可以是'block',或者'list-item'*/
	clear: both;
}

clear: both 的作用本质是让自己不和float 元素在一行显示，并不是真正意义上的清除浮动，因此 float 元素一些不好的特性依然存在。

  • 如果 clear： both 元素前面元素就是 float 元素，则margin-top 负值即使设成 -9999px ，也不见任何效果。
  • clear: both后面的元素依旧可能会发生文字环绕的现象。