本文深入探讨了CSS中的浮动与定位概念。浮动主要用于创建多列布局，元素可左右浮动并按顺序排列，可能导致父元素高度塌陷，需通过清除浮动解决。定位允许元素自由移动，包括静态、相对、绝对和固定定位，其中绝对定位脱离标准流，固定定位相对于浏览器窗口定位。文章还介绍了z-index用于控制重叠元素的层级。
Float and Position(浮动与定位）
一、FLoat （浮动）
1.1 什么是浮动？
float属性用于创建浮动框，将其移到一边，直到左边缘或右边缘及包含块或另一个浮动框的边缘。
语法：
| 属性值 | 描述 |
|---|---|
| none | 元素不浮动 |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
样例：
<style>
.left {
float: left;
width: 200px;
height: 100px;
background-color: rgb(0, 204, 255);
}
.right {
float: right;
width: 200px;
height: 100px;
background-color: rgb(255, 0, 221);
}
<style>
<body>
<div class="left">left</div>
<div class="right">right</div>
</body>
页面显示：
1.2 浮动的特性 （重难点）
- 脱离标准普通流的控制（浮）移动到指定位置（动）。（俗称脱标）
- 浮动的盒子不再保留原先的位置（会出现加了float属性的盒子叠在未添加float属性的盒子的上面）
- 如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。（注意：浮动的元素是互相贴在一起的即无缝隙，如果父级宽度装不下这些带浮动属性的盒子时，多出的盒子会另起一行对齐。）
- 浮动元素具有行内块元素的特性。（任何元素都可以浮动，不管原先是何种模式的元素，添加浮动之后具有行内块元素相似特性。即行内元素加了浮动则不需要加上转换为行内块元素就可以直接设置宽、高。）
1.3 如何约束浮动元素的位置
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。
样例1：
<style>
/* 选择器 { float ：属性值；} */
.left {
float: left;
width: 400px;
height: 100px;
background-color: rgb(0, 204, 255);
}
.right {
float: right; /*float: left;*/
width: 400px;
height: 100px;
background-color: rgb(255, 0, 221);
}
.father {
width: 800px;
height: 102px;
background-color: rgb(19, 160, 82);
margin: auto;
}
</style>
</head>
<body>
<div class="father">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
如图所示：
样例2：
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.box {
width: 990px;
height: 200px;
background-color: pink;
margin: auto;
}
.box li {
width: 190px;
height: 200px;
background-color:blueviolet;
float: left;
margin-right: 10px;
}
.box .last {
margin-right: 0;
}
</style>
<body>
<ul class="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li class="last">5</li>
</ul>
</body>
显示样例：
1.4 浮动布局注意
（1）浮动和标准流的父盒子搭配
（2）一个元素浮动了，理论上其余的兄弟元素也要浮动
（浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流）。
1.5 清除浮动
（1）为什么需要清除浮动？
由于父盒子在多数情况下不方便给高度，但子盒子浮动又不占有位置，最后父盒子高度为0时，影响下面的标准流盒子。
（2）清除浮动的本质
—— 清除浮动元素造成的影响
（清除浮动之后，父级会根据浮动的子盒子自动检测高度，从而不再影响下面的标准流）
（3）语法：
选择器{clear：属性值；}
| 属性值 | 描述 |
|---|---|
| left | 清除左侧浮动的影响 |
| right | 清除右侧浮动的影响 |
| both | 同时清除左右两侧浮动的影响 |
策略 —— 闭合浮动
（4）清除浮动 —— 额外标签法（隔离法）
在浮动元素末尾添加一个空标签，或者其他标签
例如：
<div style="clear:both"></div>
优点：通俗易懂，书写方便；缺点：结构化较差；
注意点：新的空标签必须是块级元素
(5)清除浮动 —— 父级添加overflow属性
<div name="father" style="overflow: hidden/auto/scroll;">
<div style="float: left;" name="son">one</div>
<div style="float: left;" name="son">two</div>
</div>
注意：是给父级添加！！
（6）清除浮动 —— after伪元素法(父级添加）
<style>
.clearfix:after {
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {/*IE6,7专有 */
*zoom: 1;
}
</style>
<body>
<div class="box clearfix">
<div class="one">one</div>
<div class="two">two</div>
</div>
<div class="footer"></div>
</body>
(7)清除浮动 —— 双伪元素清除浮动
```html
<style>
.clearfix:before,
.clearfix:after {
content: '';
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
</style>
<body>
<div class="box clearfix">
<div class="one">one</div>
<div class="two">two</div>
</div>
<div class="footer"></div>
</body>
二、定位
2.1 为什么需要定位
定位可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中某个位置，并且可以压住其他盒子。
2.2 定位的组成
（1）定位:将盒子定在某个位置（即摆盒子）
定位 = 定位模式 + 边偏移
1.定位模式用于指定一个元素在文档中的定位方式，通过CSS的position属性来设置。
| 值 | 语义 |
|---|---|
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
2.边偏移就是定位的盒子移动到最终位置。
| 边偏移属性 | 示例 | 描述 |
|---|---|---|
| top | top：80px | 顶端偏移量，定义元素相对于其父元素上边线的距离 |
| bottom | bottom：80px | 底端偏移量，定义元素相对于其父元素下边线的距离 |
| left | left：80px | 左端偏移量，定义元素相对于其父元素左边线的距离 |
| right | right: 80px | 右端偏移量，定义元素相对于其父元素右边线的距离 |
2.3四类定位
（1）静态定位 static
静态定位是元素的默认定位方式，即无定位。
语法：
选择器 { position：static；}
特点：无边偏移；少使用。
（2） 相对定位 relative
相对定位是元素在移动位置的时候，相对于它原来的位置来说的。（不脱标）
语法：
选择器 { position：relative；}
例子：
<style>
.box1 {
position: relative;
top: 0;
left: 20px;
width: 200px;
height: 200px;
background-color: rgba(224, 210, 14, 0.986);
}
.box2 {
top: 10px;
left: 50px;
position: relative;
width: 200px;
height: 200px;
background-color: rgba(14, 105, 224, 0.986);
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
特点：
1.参照点是自己原来的位置；
2.原来在标准流的位置继续占有，后面的盒子任然以标准流的方式对待它。
(3) 绝对定位 absolute
绝对定位是元素在移动位置的时候，相对于它祖先元素来说的。（脱标）
语法：
选择器 { position：absolute；}
<style>
.father {
position: relative;
width: 350px;
height: 350px;
background-color: rgba(224, 210, 14, 0.986);
}
.son {
bottom: 0;
left: 0;
position: absolute;
width: 200px;
height: 200px;
background-color: rgba(14, 105, 224, 0.986);
}
</style>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
特点：
1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）。
2.如果祖先元素有定位（相对，绝对，固定定位），则以最近一级的有定位祖先元素作为参考点移动位置。
3.绝对定位不占有原先的位置（脱标）。
（4） 固定定位 fixed
固定定位是元素固定于浏览器可视区的位置，即在浏览器滚动时元素的位置不会改变。
语法：
选择器 { position：fixed；}
特点：
1.以浏览器的可视窗口为参照点移动元素；
●跟父元素没有任何关系；
●不能随滚动条滚动；
2.固定定位不再占有原先的位置；
●固定定位也是脱标的，可视为一种特殊的绝对定位。
小技巧——固定在版心右侧位置
使用算法：
1.让固定定位的盒子left：50%，走到浏览器可视区的一半位置；
2.让固定定位的盒子margin-left：版心宽度的一半距离。
<style>
.main {
width: 800px;
height: 1400px;
background-color: blanchedalmond;
margin: auto;
}
.fixed {
position: fixed;
left: 50%;
top: 100px;
width: 50px;
margin-left: 405px;
height: 50px;
background-color: black;
}
</style>
<body>
<div class="fixed"></div>
<div class="main">主要内容</div>
</body>
页面显示：
plus1：子绝父相
子级是绝对定位的话，父级要使用相对定位。
⭕子级绝对定位不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
⭕父盒子需要加定位限制盒子在父盒子内显示
⭕父盒子布局时，需要占有位置，因此父亲只能是相对定位。
plus2：粘性定位
粘性定位可以被认为是相对定位和固定定位的混合。
语法：
选择器 { position：sticky；}
特点：
1.以浏览器的可视窗口为参照点移动元素（固定定位的特点）
2.粘性定位占有原先的位置（相对定位的特点）
3.必须添加top，left，right，bottom其中一个才有效
2.4 定位叠放次序 z-index
在使用定位布局时，可能会出现盒子重叠的情况，则使用z-index来控制盒子的前后次序。
语法：
选择器 { z-index： 1；}
●数值可以是正整数，负整数或0，默认是auto，数值越大，盒子越靠上；
●如果属性值相同，则按照书写顺序，后来居上；
●数字后面不能加单位
●只有定位的盒子才有z-index属性
例子：
<style>
.box1 {
position: absolute;
top: 0;
left: 20px;
width: 200px;
height: 200px;
background-color: rgba(224, 210, 14, 0.986);
}
.box2 {
top: 10px;
left: 50px;
position: absolute;
width: 200px;
height: 200px;
background-color: rgba(14, 105, 224, 0.986);
}
.box3 {
top: 100px;
left: 150px;
position: absolute;
width: 200px;
height: 200px;
background-color: rgba(224, 14, 94, 0.986);
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
plus3：定位特殊特性
1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度；
2.块级元素添加绝对或固定定位，如果不给宽度或者高度，默认大小是内容的大小。
3.绝对（固定）定位会完全压住盒子
浮动元素不同，只会压住它下面的标准流盒子，但是不会压住下面标准流盒子里面的文字（图片）。
绝对定位会压住下面标准流盒子的所有内容。
本博客写作参考黑马程序员pink老师，如有抄袭，深表歉意！
扫一扫
473
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
