本文首发于知乎：https://www.zhihu.com/people/xiao-chong-10-60
flex布局（2009年w3c提出）出来之前，PC端网页的布局方式（手段）有3种：
1）标准流
2）浮动
3）定位
其中，3者之间又有密不可分的关系。
1.相对定位与标准流
定位里最接近标准流的是相对定位，相对定位不脱标，依然保留在标准流里的位置。
除此之外，相对定位的元素没有像绝对定位那样具有行内块元素的特性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span{
position: relative;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<span>111</span>
</body>
</html>
2.浮动和绝对定位
浮动和绝对定位是近亲，浮动有3个特性：
1）脱标
2）一行显示且顶端（父元素的顶端）对齐
3）浮动的元素具有行内块元素的特性
实际上，绝对定位具有1）和3）的特性：即脱标和具有行内块元素的特性。更深层次，因为脱标了才具有了行内块元素特性。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
position: absolute;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<span>111</span>
</body>
</html>
从上面看出：相对定位更接近于标准流，绝对定位和浮动比较类似。
我们布局中的技巧:子绝父相和这个也有关系，父元素相对定位，在标准流里占住位置，子元素绝对定位，参考父元素占住的位置进行移动，并且是脱标的。
利用浮动和绝对定位脱标（脱离标准流）的特性，我们可以轻松做出2栏布局(左侧宽度确定，右边占据剩余空间)：
浮动做法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
overflow: hidden;
}
.left {
float: left;
width: 200px;
height: 600px;
background-color: pink;
}
.right {
margin-left: 200px;
height: 600px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
绝对定位做法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
position: relative;
}
.left {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 800px;
background-color: pink;
}
.right {
margin-left: 200px;
height: 800px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。