float
2018-06-11 本文已影响0人
啊啊啊阿南
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 | block |
| inline-block | block |
| inline-table | table |
| table-row | block |
| table-row-group | block |
| table-column | block |
| table-column-group | block |
| table-cell | block |
| table-caption | block |
| table-header-group | block |
| table-footer-group | block |
如表可知，除了inline-table计算为table外，其他全都是block
float的作用机制
- 让父元素高度塌陷，，“高度塌陷”只是让跟随的内容可以和浮动元素在一个水平线上，
- “行框盒子和浮动元素的不可重叠性”，也就是“行框盒子如果和浮动元素的垂直高度有 重叠，则行框盒子在正常定位状态下只会跟随浮动元素，而不会发生重叠”（块状盒子是和图片完全重叠的）。
本篇借鉴出版书张鑫旭的CSS世界
