CSS布局深入：定位与浮动详解

85 浏览量更新于2024-09-01 收藏 103KB PDF 举报

"深入理解CSS布局之定位与浮动" 在CSS布局中，定位和浮动是两个至关重要的概念，它们使得元素能够在网页设计中实现更复杂的布局和视觉效果。本篇文章主要探讨了这两个概念以及它们在实际应用中的差异和使用方法。 1.1 文档流文档流是网页元素按照默认规则自左向右、自上而下排列的方式。它构成了网页的基本布局框架。要打破这种常规布局，就需要使用浮动和定位技术。 1.2 定位定位是通过`position`属性来实现的，它可以将元素相对于其自身、祖先元素或浏览器窗口进行定位。`position`有四个主要的值： - `static`：这是元素的默认值，元素按照文档流正常排列。 - `relative`：相对定位。元素保持其原始位置，但可以通过`top`, `left`, `right`, `bottom`属性相对于其当前位置进行偏移，不影响其他元素的位置。 - `absolute`：绝对定位。元素脱离文档流，相对于最近的非`static`定位的祖先元素定位。若无这样的祖先，它将相对于根元素（通常是`<html>`）定位。 - `fixed`：固定定位。元素始终相对于浏览器窗口定位，即使在页面滚动时，其位置也会保持不变。 1.3 浮动浮动是通过`float`属性实现的，它允许元素在文档流中向左或向右移动，直到其边缘碰到包含框或其他浮动元素的边缘。浮动元素会影响到周围元素的布局，使得后续的元素可以环绕它排列。 - `float: left;`：元素向左浮动。 - `float: right;`：元素向右浮动。在浮动元素的上下文中，如果一个元素的`clear`属性设置为`both`，则该元素将会放置在所有浮动元素之后，不与其发生重叠。 1.4 清除浮动由于浮动可能导致父元素高度塌陷（即父元素无法包含其浮动子元素的高度），因此需要清除浮动以避免此类问题。可以使用以下方法： - `clear: both;`：阻止元素两边的浮动元素影响。 - 使用`clearfix`类：一种非侵入式的清除浮动方法，通过CSS伪类`:before`和`:after`添加清除浮动的内联块元素。 1.5 综合应用在实际布局中，通常会结合使用浮动和定位。例如，可以使用浮动来创建多列布局，而定位则用于特定元素的精确定位，如导航栏、弹出框或固定侧边栏。总结来说，理解和掌握CSS的定位与浮动是构建复杂网页布局的基础，它们提供了灵活性，使开发者能够创造出各种各样的网页设计效果。在实践中，应灵活运用这些技巧，以满足不同场景下的布局需求。

深入理解深入理解css布局之定位与浮动布局之定位与浮动

主要介绍了css布局之定位与浮动的相关资料,需要的朋友可以参考下

在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。今天我们来深

入学习一下css布局相关的知识。

上篇文章我们讲完了css布局中盒模型和元素分类的相关知识，同时介绍了box-sizing和行框。这篇我们继续...

一、定位与浮动一、定位与浮动

上篇我们讲解了不同类型元素的特点，我们可以随意的排列组合他们来达到我们想要的效果。但是他们都是基于一个二维平面

的，如果我们想在布局中有遮挡，重叠之类的更丰富效果，我们就需要使用到定位和浮动的相关知识。

1.1 文档流文档流

文档流就是按照页面元素书写的顺序，将页面元素按从左到右，从上至下的一般顺序进行排列。那么也就可以理解成我们刚才

所说的一个二维平面的概念。

那么如果我想要实现更丰富的效果，就需要脱离文档流，在一个新的平面上去显示，这样我们就可以在屏幕上有多个平面叠加

显示的效果了，那么这就是浮动和定位的工作了。

1.2 定位定位

定位允许你使用 position 属性，将一个元素相对于他自己或者他的祖先元素甚至是浏览器窗口通过 top , left , right , bottom 属

性进行偏移。

根据 position 属性的取值，元素可以分为静态定位元素static（默认值）、相对定位元素relative、绝对定位元素absoute和固

定定位元素fixed。

首先我们抛开static这个默认值，因为他基本不属于定位的范畴，因为元素默认就是static，他就相当于是依据文档流显示。

当我们使用定位时，需要position属性和top,left,right,bottom这两类属性共同参与来决定一个元素的定位类型和偏移量。

使用方法很简单，这里说下他们之间的区别:

relative相对定位相对定位

元素根据其在当前文档流所在位置作为参考系，进行偏移。

定位之后原来元素在文档流中的位置会被空出来，不会被其他元素所占据。

absolute绝对定位绝对定位

元素会将其带有position为非static的祖先元素作为参考系进行偏移。

如果祖先元素里没有带有position为非static的，则会以首屏作为参考系。

定位后，原来在文档流中占据的位置，会被其他元素所占据。

fixed固定定位固定定位

根据当前可视区进行定位，所以当文档流为多屏可滚动时，fixed定位的元素会跟随滚动而滚动。

跟absolute定位一样，定位后，原来在文档流中占据的位置，会被其他元素所占据。

1.3 包含块包含块

包含块就是个专有名词，其实概念很简单，这里了解一下就好。

包含块是一个矩形区域，当元素设置属性的百分比的时候，比如width：50% 或者 top: 10%，其参考系就是他的包含块。

大部分时候对于文档流里的元素，其包含块指的都是其父元素的区域。

对于定位元素来说，相对定位元素包含块也是其父元素区域；

绝对定位元素的包含块是其带有position为非static的祖先元素区域。如果其没有这样的祖先元素的话其包含块为首屏显

示区域，这个区域也有个专有名词叫做初级包含块。

固定定位元素的包含块就是当前可视区的区域。

1.4 浮动浮动

浮动允许你将元素浮动起来，脱离文档流向左或者向右移动。直到它的外边缘碰到包含框或另一个浮动框的边框为止。

虽然浮动也脱离文档流显示，但是与定位不同的是 inline 和 inline-block 的元素可以识别这种因浮动而脱离的文档流，从而不

发生重叠。

<!DOCTYPE html>

<head>

<title>Document</title>

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38698403

粉丝: 8
资源: 920

CSS布局深入：定位与浮动详解

div+css布局大全

css-layout-and-positioning-css布局与定位

CSS布局基石：深入理解浮动与定位

第十三课 css元素、定位与浮动-011

css 相对定位 绝对定位 浮动 分析

CSS布局进阶：定位与浮动实战指南

CSS布局秘籍：浮动与定位实战

CSS相对定位、绝对定位与浮动深入解析

前端进阶：CSS元素、定位与浮动详解

CSS定位详解：浮动、绝对与固定布局深入解析

最新资源

css 相对定位绝对定位浮动分析