关于float、absolute以及relative

最新推荐文章于 2018-11-02 21:33:29 发布

superliuzhen

最新推荐文章于 2018-11-02 21:33:29 发布

阅读量410

点赞数 2

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/qq_41751616/article/details/81047665

CSS 专栏收录该内容

1 篇文章

订阅专栏

本文详细解析了浮动（float）与绝对定位（absolute）在网页布局中的区别，并通过实例展示了它们在不同定位状态下的位置覆盖情况。文章进一步探讨了相同定位之间的关系，以及如何在实际开发中灵活运用这些概念。

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

说实话今天才知道float和absolute是脱离了标准文档流的，之前在学“子绝父相”的时候一直以为relative是脱离了标准文档流，后来知道其实absolute是以它的最近且定位（position）了的父级容器，换言之，父级容器是absolute定位也OK，如果父级没定位就看爷级（笑），都没定位才轮到body。

说重点，今天了解了一下两个块级元素在采用float、absolute、relative这些时的位置覆盖情况。

首先，我创建两个div：

	<body>
		<div class="red">
			
		</div>
		<div class="blue">
		
		</div>
	</body>

并设置一下它们的样式：

.red {
	width: 20%;
	height: 2rem;
	background-color: red;
}
.blue {
	width: 80%;
	height: 4rem;
	background-color: blue;
}

就是这个样子：

float和absolute是脱离了标准文档流的，那么这意味着什么呢？

第一步，把红块设置为float（我的测试就用left了），蓝块设置为relative，结果：

蓝块顶了上来，而且覆盖了红块

那如果，蓝块设置为static呢？（就是没设置嘛），结果：

蓝块虽然还是顶了上来，但这次是跑到下面去了

我把红块分别设置为relative/static，把蓝块设置为float，结果都是：

这样看来感觉float脱离标准文档流之后便“任人宰割”了呀，“顶别人顶不动，别人顶他随便顶”。

我又把以上测试中的float改为为同样脱离了标准文档流的absolute，结果一模一样，诶，果然是“好兄弟”。

但是这对好兄弟之间又会是怎样的情况呢？

首先，把红块设置为float，蓝块设置为absolute，结果：

蓝块顶了上来，而且覆盖了红块，“说好的兄弟呢？”

再把红块设置为absolute，蓝块设置为float，结果是：

蓝块顶了上来，但在红块的下面，“哈哈，我float也能顶你absolute”

如此看来float和absolute之间是“后来者顶上”，但一直是absolute盖过float。“兄（absolute）弟（float）内斗？”

总结出一个图：

图中如果上面的元素顶下面的就产生覆盖效果，下面的顶上面的就顶上去并置于下层。

以上都是不同定位之间的关系，相同之间的关系又会是怎样呢？

标准文档流里的就不说了，看看非标准文档流二位：

把红块和蓝块都设置为float（同样都是left），不用看，肯定是蓝块紧跟在红块右边，空间不够就下一行，不存在什么“顶”和覆盖

但是把红块和蓝块设置为absolute，就不同了：

把蓝块调到红块前面试试：

可见absolute与absolute之间是后来者居上。（这个测试纯属闲的无聊测得，对于absolute，一般都会给它定位写一下，设置个合适的位置就是喽。）