转载于:https://www.cnblogs.com/worstprogrammer/p/5880207.html
我们通过一个简单的实验来了解position:relative float overflow:hidden 和 inline-block。
下面以index.html和layout_new.css这两个文件为例来探讨。
index.html:
<!DOCTYPE html> <html><head><link rel="stylesheet" type="text/css" href="assets/css/layout_new.css"></head><body><div class = "a1">a1<div class = "b1"> b1</div>between b1 and b2<div class = "b2">b2</div></div></body> </html>layout_new.css
.a1{border:10px red solid;width:90%;overflow:hidden;
}.b1, .b2{display:inline-block;border:5px blue solid;width:40%;
}.b1{position:relative;left:100px;height:200px;background-color:red;}.b2{float:left;height:300px;
}- 在layout_new.css中，我们重点关注以下几点:
- .class为a1的div被设置为overflow:hidden
- .b1与.b2倍设置为inline-block
- .b1被设置为 position:relative和left:100px;
- .b2被设置为float:left
代码运行效果图如下：
我们一一分析：
-
首先，inline-block是一种布局方式。之后的inline对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
- 然后，overflow:hidden在高/宽度确定时能把多余的部分裁剪掉，但是如果没指定高/宽度的话（比如此例中，.a1就没指定高度）那么就可以根据内部内容的高度来自行适应。所以尽管.b1和.b2的高度不同，但最终.a1为了包含所有元素，其高度便以.b2为准了。
-
如果一定要追究高度自适应的效果的原因，那就是因为overflow:hidden本质的功能还有一个是清除浮动元素（所以浮动的b2被考虑在高度计算范围内）。
overflow:hidden可防止float元素遮盖原本在那的元素而发生的重叠现象。
不加overflow:hidden的话效果如下:
(由于b2是float的所以脱离了文档流所以a1高度计算时没有考虑 b2的高度)
.b1中的position:relative就是让对象脱离原本的文档流。
在此例中，本来b1的位置是这样的
但加了position:relative和left:100px后，它就相对于原来按文档流顺序时本该出现的位置往右偏移了100px。
.b2的float:left就是在文档流安排完成后，浮动到对应位置。浮动的对象是在文档流安排完成后再计算位置的。float对象在没设置overflow:hidden的时候可能会与原本在那的元素重叠，但设置了overflow:hidden后可以避免这种重叠情况。
那么总的来说我们可以推测出浏览器在布局时的顺序时这样的：
- 先把float以外的内容按文档流一个个地显示到屏幕上（先不管relative的偏移，照常放置在那）
- 然后把各个relative按设定的偏移去让它偏移。
- 最后让float元素浮进去，把能挤开的元素都挤开
- 于是就有了最后的效果图。