简明的例子讲解position:relative、float、overflow:hidden和inline-block

标签（空格分隔）： css relative float

我们通过一个简单的实验来了解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元素浮进去，把能挤开的元素都挤开
  • 于是就有了最后的效果图。
posted @ 2016-09-18 01:06  worstProgrammer  阅读(1810)  评论(0)    收藏  举报