欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS-Learning | CSS中的定位模型:绝对定位、相对定位、固定定位和浮动(如何清除浮动)

程序员文章站 2022-04-24 22:35:31
...

定位模型

CSS中有几种不同的定位模型,包括浮动绝对定位相对定位固定定位。除非特别指定,否则所有元素盒子都会在常规文档流中生成,即positioin属性的默认值为static。常规文档流中元素盒子的位置,由元素在HTML中的位置决定。

确定元素的包含块至关重要,定位模型不同,计算width、height、margin或padding值为百分比时,计算依据会发生变化。接下来,我们来看看不同定位模型以及与之对应的包含块。

相对定位 position: relative

使用相对定位,可以通过设置top、right、bottom和left属性,使该元素相对于它在常规文档流的初始位置平移一段距离。

无论是否位移,相对定位的元素仍然会在文档流中占用初始的空间。因此,这样平移元素会导致它遮挡其他元素。

绝对定位 position: absolute

绝对定位会把元素拿出文档流,因此不会占用原来的空间,文档中的其他元素会各自重新定位,仿佛绝对定位的那个元素没有存在过一样。

绝对定位元素的包含块是距离它最近的定位祖先,也就是display属性设置为static之外的任意值的祖先元素。如果没有这么一个定位祖先,那么它就相对于文档的根元素即html元素定位。文档的根元素也叫做起始包含块

固定定位 position: fixed

固定定位元素的包含块是视口(viewport)。因此固定定位可用于来创建始终停留在窗口相同位置的浮动元素。

浮动 float

浮动盒子可以向左或向右移动,直到其外边沿接触包含块的外边沿,或接触另一个浮动盒子的外边沿。

浮动盒子也会脱离常规文档流,因此常规流中的其他块级盒子的表现,几乎当浮动盒子根本不存在一样。

如果浮动元素后跟着的是常规文档流中的元素,那么这个元素的盒子就会当浮动盒子不存在一样,该怎么布局就怎么布局。但是,这个元素盒子中的文本内容则会记住浮动元素的大小,并在排布时避开它,为它留出相应的空间,造成文本环绕盒子的效果。

清除浮动

想要阻止行盒子环绕在浮动盒子外面,需要给行盒子的元素应用clear属性

clear属性的值有left、right、both和none,用于指定盒子的哪一侧不应该紧挨着浮动盒子。

因为浮动的元素被拿出文档流,包含它的块只包含浮动元素,就无法生成高度。怎么才能使块从视觉上也包住浮动元素?需要在这个元素内部某处应用clear属性

  1. 在结束的div标签前额外添加一个空元素,然后清除该元素。
.block {
	background-color: gray;
}
.tag {
	float: left;
}
.clear {
	clear: both;
}
<div class="block">
	<div class="tag">浮动元素</div>
	<div class="clear"></div> // 添加额外的空div
</div>
  1. 使用:after伪类来模拟额外的清除元素。
.block {
	content: "";
	display: block;
	clear: both;
}
  1. 设置overflow属性,生成块级格式化上下文(BFC,block formatting context)。因为块级格式化上下文自动包含浮动,允许元素创建自己内部的块级格式化上下文的规则:
  • display属性值设置为inline-block或table-cell之类的元素,可以为内容创建类似块级的上下文;
  • float属性值不是none的元素;
  • 绝对定位的元素;
  • overflow属性值不是visible的元素;
.block {
	overflow: auto;
}