一篇文章我们把「Web前端开发进阶篇」CSS框模型讲解完了，接着我们来讲解下一篇文章，关于CSS定位的内容知识，小伙伴们跟上我的节奏，动起来，Let's go！

【引言】

CSS定位思想很简单，就是让你定义的元素框相对于其正常位置应该出现的位置，相对于父元素、另一个元素甚至是浏览器窗口的位置。浮动不是完全定位，不过，它也不是正常流布局。在我们切页面的过程中，定位和浮动是经常用，用不好，就会出现页面在不同浏览器的兼容性问题。我会在下面的文章中详细说明。

CSS定位机制

CSS有三种定位机制：普通流、浮动和绝对定位。

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

CSS position属性

通过position属性我们可以选择4中不同类型的定位。

1、position：static

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

2、position：relative

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

3、position：absolute

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

4、position：fixed

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

CSS定位属性

CSS 定位属性允许你对元素进行定位。

position：把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

top：定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。

right：定义了定位元素右外边距边界与其包含块右边界之间的偏移。

bottom：定义了定位元素下外边距边界与其包含块下边界之间的偏移。

left：定义了定位元素左外边距边界与其包含块左边界之间的偏移。

overflow：设置当元素的内容溢出其区域时发生的事情。

clip：设置元素的形状。元素被剪入这个形状之中，然后显示出来。

vertical-align：设置元素的垂直对齐方式。

z-index：设置元素的堆叠顺序。

了解了这些属性后，下面我们详细的说说相对定位和绝对定位。

CSS相对定位

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

#box_relative {
 position: relative;
 left: 30px;
 top: 20px;
}

如下图所示：

注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

CSS绝对定位

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

普通流中其它元素的布局就像绝对定位的元素不存在一样：

#box_relative {
 position: absolute;
 left: 30px;
 top: 20px;
}

如下图所示：

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

对于定位的主要问题是要记住每种定位的意义。所以，现在让我们复习一下学过的知识吧：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

注释：根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。

提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

CSS浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“挡住”：

CSS float 属性

通过 float 属性实现元素的浮动。因此，我们可以创建浮动框可以使文本围绕图像：

要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。

为了实现这种效果，在被清理的元素的上外边距上添加足够的空间，使元素的顶边缘垂直下降到浮动框下面：

这是一个有用的工具，它让周围的元素为浮动元素留出空间。

让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码：

.news {
 background-color: gray;
 border: solid 1px black;
 }

.news img {
 float: left;
 }

.news p {
 float: right;
 }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

这种情况下，出现了一个问题。因为浮动元素脱离了文档流，所以包围图片和文本的 div 不占据空间。

如何让包围元素在视觉上包围浮动元素呢？需要在这个元素中的某个地方应用 clear：

不幸的是出现了一个新的问题，由于没有现有的元素可以应用清理，所以我们只能添加一个空元素并且清理它。

.news {
 background-color: gray;
 border: solid 1px black;
 }

.news img {
 float: left;
 }

.news p {
 float: right;
 }

.clear {
 clear: both;
 }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

这样可以实现我们希望的效果，但是需要添加多余的代码。常常有元素可以应用 clear，但是有时候不得不为了进行布局而添加无意义的标记。

不过我们还有另一种办法，那就是对容器 div 进行浮动：

.news {
 background-color: gray;
 border: solid 1px black;
 float: left;
 }

.news img {
 float: left;
 }

.news p {
 float: right;
 }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

这样会得到我们希望的效果。不幸的是，下一个元素会受到这个浮动元素的影响。为了解决这个问题，有些人选择对布局中的所有东西进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理。这有助于减少或消除不必要的标记。

CSS定位今天就讲解到这里了，下一篇讲解CSS选择器，希望大家不要放弃学习哦！

PS：

本文为‘Web前端进阶指南’原创，手动码字不易，小伙伴们别忘了顺手点个赞加个关注哈，有什么不懂的下方留言评论或私信。谢谢大家哈！

Web前端开发-CSS入门干货01 、Web前端开发-CSS入门干货02 、Web前端开发-CSS布局-盒子模型入门干货 介绍了CSS重要基础概念选择器和字体系列、文本系列、背景系列样式以及CSS布局中元素的盒子模型，下面介绍CSS布局中另外两个重要应用浮动和定位。

根据元素浮动、定位的特性可以将CSS布局分为三种：标准流、浮动流、定位流；

其中标准流是利用块级元素独占一行、自上而下，行内元素一行显示、遇到阻碍自动换行、自左向右的布局方式。

1.浮动

（1）什么是浮动

元素脱离原先位置，不再占据空间，相对于未浮动元素类似漂浮在其上面；

浮动元素具有了行内块元素特性，并实现贴边布局。这里的边可以是父级元素的边也可以是同样浮动的兄弟级元素的边。

（2）浮动解决的问题

改变块级元素默认的垂直布局方式，改为横向布局。

行内块样式（display: inline-block;）也可以改变块级元素的布局方式，但是不能灵活解决两个块级元素之间缝隙、不能灵活解决多个块级元素分别实现左对齐、右对齐等问题。当然如果想要块级元素随意放置，那就要用到定位了。

（3）浮动的语法

选择器 {float:none/left/right}，对选择器选择的元素实现不浮动、左浮动、右浮动。

（4）浮动的典型应用

通过不浮动的块级元素+嵌套在其内内的浮动元素，实现页面各种布局。

块级元素实现纵向布局，浮动的元素实现横向布局。

（5）因为浮动引出的问题

浮动元素通常嵌套在一个不浮动的元素内，进行配合使用；所有浮动元素的高以及外边距之和不能超过那个不浮动元素，否则出现重叠。

那么当嵌套的浮动的子元素数量不确定时，那么父级元素的高度就不能确定。为了解决这个问题，提出来不设置父级元素的高度，让子元素的高度之和成为父元素高度的方式；然而浮动的子元素具有脱离原先位置、不占空间的特点，那么父元素的高度只会是0，在父元素之后的兄弟元素就会与上一个父元素内浮动元素发生重叠。为了解决这个问题，提出来清除浮动。

（6）清除浮动

1）语法

选择器 {clear:right/left/both};清除选择器选中的元素的右浮动、左浮动、左右浮动。

2）清除浮动方式

a）额外标签法

添加一个与浮动元素同级的空标签（块级），并为其设置清除浮动的样式。

<style>
.one {float:left}
.kongbq {clear:both} 
</style>

<div class="box">
<div class="one"> </div>  
<div class="kongbq"> </div>
</div>

b）父级元素添加overflow样式（常用）

语法：选择器 {overflow:hidden}

c）父级元素添加after伪元素样式（常用）

样式如下：

.clearfixry:after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfixry { /*IE6、7专有*/
*zoom:1;
}

d）父级元素添加双伪元素（常用）

样式如下：

.clearfixry:before,.clearfixry:after {
content:"";
display:table;
}
.clearfixry:after {
clear:both;
}
.clearfixry { /*IE6、7专有*/
*zoom:1;
}

2.定位

（1）什么是定位

将html元素放置在任意指定的位置，提高页面布局的灵活性。

（2）定位解决的问题

比如页面侧边固定的工具栏、轮播图

（3）定位的实现方式

利用定位模式+边偏移，在样式中设定定位模式，然后设定元素盒子模型边偏移。

1）边偏移

包括top、right、bottom、left四个分项。

2）定位模式分类

a）静态定位（static）：元素无偏移，也即元素本身的默认布局方式。

语法：选择器 {position:static;}

b）相对定位（relative）：相对元素自身原先位置设置偏移。（常用）

语法：选择器 {position:relative;}

需要注意的是设置了相对定位的元素仍旧实际占据位置

c）绝对定位（absolute）：相对于元素的拥有定位的父级（或者更高级）元素进行定位。（常用）

语法：选择器 {position:absolute;}

需要注意的（1）设置的绝对定位的元素的参考依据是有定位模式的父级或者更高级元素的。

（2）设置了绝对定位的元素会有浮动效果，即不再占有位置。

d）固定定位（fixed）：相对于浏览器可视区域，在某个位置固定不动。（常用）

语法：选择器 {position:fixed;}

需要注意的（1）设置的固定定位的元素的参考依据浏览器当前可视窗口。

（2）设置了固定定位的元素会有浮动效果，即不再占有位置。

e）粘性定位（sticky）：被认为是相对定位和固定定位的混合。元素在跨越特定偏移前为相对定位，之后为固定定位。

语法：选择器 {position:sticky; top:10px;}

需要注意的是（1）粘性定位一定要设置边偏移（任何边都可行），否则其功能和相对定位相同。

（2）设置的粘性定位的元素的参考依据浏览器当前可视窗口。

（3）设置的粘性定位的元素仍旧实际占据位置

#学问分亨官##闪光时刻二期##闪光时刻第二期主题征文#