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

最新推荐文章于 2024-08-25 13:06:40 发布

weixin_30542079

最新推荐文章于 2024-08-25 13:06:40 发布

阅读量186

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/worstprogrammer/p/5880207.html

本文通过一个简单实例详细解析了CSS中的position:relative、float、overflow:hidden及inline-block等属性的作用原理及浏览器布局顺序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

标签（空格分隔）： 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元素遮盖原本在那的元素而发生的重叠现象。