浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动布局</title>
<style>
.box{
overflow: hidden;
}
.box1 {
float: left;
background: red;
width: 20%;
height: 80px;
}
.box2 {
float: right;
background: blue;
width: 80%;
height: 180px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>效果：
代码量少，能够轻松实现多列布局（父元素高度坍塌那都不叫事）。但是，无法实现各列高度自适应，设置多列宽度后，剩下一列宽度无法自适应,而且浮动原本不是用来布局的，他是用来实现文字环绕图片来着。而且无法通过父元素设置text-align:center,使得子元素居中显示，浮动是紧贴顶部的。无法设置vertical属性进行设置垂直对其方式。
使用场景：早期布局神器，但是很多地方需要设置绝对值,导致无法自适应，或者在设置百分比的时候容易导致布局错乱
案例：w3c官方文档
绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位布局</title>
<link rel="stylesheet" href="css/install.css">
<style>
.box {
position: relative;
}
.box1 {
background: red;
width: 20%;
height: 80px;
}
.box2 {
position: absolute;
display: inline-block;
background: blue;
width: 80%;
height: 180px;
top: 0px;
left: 20%;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>效果：
高宽都不能自适应，而且position具有破坏性，脱离了文档流，具有遮罩特性。一般用作弹出层。京东、淘宝、天猫首页商品都有使用，一般不用来布局
display:inline-block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display:inline-block</title>
<link rel="stylesheet" href="css/install.css">
<style>
.box{
overflow: hidden;
font-size: 0px;
}
.box1 {
display: inline-block;
background: red;
width: 20%;
height: 80px;
font-size: 20px;
text-align: center;
vertical-align: top;
}
.box2 {
display: inline-block;
background: blue;
width: 80%;
height: 180px;
font-size: 20px;
text-align: center;
vertical-align: top;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>
</body>
</html>没有浮动的烦恼，可以设置各列垂直水平对其，inline-block元素之间有html空白,而且inline-block元素沿着默认的基线对齐，会出现在各种奇形怪状的高度，可以通过vertical-align或者line-height进行设置
display:table-cell
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位布局</title>
<link rel="stylesheet" href="css/install.css">
<style>
.box {
display: table;
table-layout: fixed;
width: 100%;
text-align: center;
}
.box>div {
display: table-cell;
}
.box1 {
background: red;
vertical-align: middle;
}
.box2 {
background: blue;
vertical-align: middle;
}
.box3 {
background: yellow;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
<p>box1</p>
<p>box1</p>
</div>
<div class="box2">
box2
</div>
<div class="box3">
box3
</div>
</div>
</body>
</html>inline-block的升级版，不需要清除各列之间的空白间隙，各列宽度可以根据外边框自适应都能做到可控
display：flex
未完待续..................
本文出自 “子莫首” 博客，请务必保留此出处http://zimoushou.blog.51cto.com/4306790/1729213
原文：http://zimoushou.blog.51cto.com/4306790/1729213
