float

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。(来自http://www.w3school.com.cn/cssref/pr_class_float.asp)

浮动元素会生成一个块级框，即块状化的意思是一旦元素的float值不为none,那其display的计算值为 block 或 table

可以在浏览器控制台输入以下js代码查看效果

var span = document.createElement('span'); document.body.appendChild(span); 
console.log('1. ' + window.getComputedStyle(span).display); // 设置元素左浮动 
span.style.cssFloat = 'left';
console.log('2. ' + window.getComputedStyle(span).display);

因此，没有任何理由出现下面的组合样式

span{
  float: left;
  display: block;  /*多余*/
}
span{
  float: left;
  vertical-align: middle;  /*多余 对块级元素无效*/
}
span{
  float: left;
  text-align: center;  /*多余 对块级元素无效*/
}

float属性与display属性值转换关系如图：

如表可知，除了inline-table计算为table外，其他全都是block

float的作用机制

• 让父元素高度塌陷，，“高度塌陷”只是让跟随的内容可以和浮动元素在一个水平线上，
• “行框盒子和浮动元素的不可重叠性”，也就是“行框盒子如果和浮动元素的垂直高度有 重叠，则行框盒子在正常定位状态下只会跟随浮动元素，而不会发生重叠”（块状盒子是和图片完全重叠的）。

本篇借鉴出版书张鑫旭的CSS世界