浮动属性 position 与 float 细究

---

浮动元素与inline-block 化

当给任意元素，设置了 float 或者 position 属性后，则此元素将变得 如同 inline-block 元素一般。

inline-block 三特征：包裹性、宽高可定义、图文混排(也就是图片和文字可以在同一行显示，不会换行)。

例如，给div元素设置了浮动，则div 元素的默认宽度将会由原来的 100% 变成自适应内部元素的宽度(不过在标准浏览器下不具备图文混排特性)，当给span 元素设置了浮动，则span 元素将可以设置宽高等。

例如：

HTML:
<span>无需 `display:inline-block;` 也能设置宽高</span>

CSS:
// 虽然没有将 span 设置为 Block元素，但因为为其设置了浮动，所以为其设置宽高照样有效

// 也可以是 float:right; 
// 或者 position:absolute; 或者 position: relative;
float:left;
width:150px;
height:150px;

浮动属性 position 与 float

position 与 float 都是浮动元素，但前者的破坏性比后者更高。

• 设置了 float 属性的元素，父元素高度将会塌陷，但是宽度仍能撑开，如下：

HTML:
<div class="box1">
    <span class="box2">float子元素</span>
    123456789098
</div>

CSS:
.box1{
  background-color: yellowgreen;
}
.box2{
  // 现在是 float
  float:left; 
  height:50px;
  background-color: skyblue;
}

效果图

如上，子元素设置了float 属性，导致代表父级元素的yellowgreen 高度塌陷， 无法撑起父级元素高度，但是子元素占据宽度仍然真实存在，所以才能把父级元素中的文本信息挤到右侧。

• 设置了 position 属性为absolute的元素(不包括 relative)，父元素高度和宽度都将会塌陷

HTML:
<div class="box1">
    <span class="box2">position子元素</span>
    12345678909876
</div>

CSS:
.box1{
  background-color: yellowgreen;
}
.box2{
  // 现在是 position
  position:absolute;
  background-color: skyblue;
  height:50px;
}

效果图

可以看到，因为设置了 position:absolute; 的子元素，已经彻底脱离了文档流 ，高度和宽度对于父级元素而言，都是“不可见” 的，所以子元素才会将遮挡住父级元素，致使父级元素中的文本部分不可见。

最后，如果一个元素同时设置了 float 和 position:absolute;，则在样式规则集中，无论 float 是在 position:absolute;的前面还是后面，float 对于元素的定位都将不起作用，也就是说，全都以 position:absolute; 的为准。

left/top 设置与否position:absolute; 的影响

没有应用left/top等属性值的absolute元素可以看成是普通元素，只不过与普通元素不同之处在于，前者是不占据空间的；
如果是block水平的(例如 display:block;)，换行显示；
如果是inline水平的(例如 display:inline-block;)，跟在前面的文字后面显示。