一、Float布局
布局分析:
| 布局方案 |
实现 |
优点 |
缺点 |
| Float布局 |
左右中三列，左列左浮动，右列右浮动，中间列设置左右margin |
比较简单，兼容性也比较好 |
浮动元素脱离文档流，使用的时候只需要注意一定要清除浮动。 |
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="left">Left</div>
<!-- 右栏部分要写在中间内容之前 -->
<div class="right">Right</div>
<div class="main">Main</div>
</div>
</body>
</html>
<style>
body,
html,
.container {
height: 100%;
padding: 0;
margin: 0;
}
.left {
float: left;
height: 100%;
width: 200px;
background: pink;
}
.main {
height: 100%;
margin: 0 200px;
background: skyblue;
}
.right {
float: right;
height: 100%;
width: 200px;
background: pink;
}
</style>
二、Position布局
布局分析:
| 布局方案 |
实现 |
优点 |
缺点 |
| Position布局 |
左中右三列（无顺序），根据定位属性去直接设置各个子元素位置 |
快捷，设置很方便 |
元素脱离了文档流，后代元素也脱离了文档流，高度未知的时候，会有问题，有效性和可使用性比较差 |
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="left">Left</div>
<div class="main">Main</div>
<div class="right">Right</div>
</div>
</body>
</html>
<style>
body,
html,
.container {
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
.left,
.right {
position: absolute;
height: 100%;
top: 0;
background: pink;
}
.left {
left: 0;
width: 200px;
}
.right {
right: 0;
width: 200px;
}
.main {
height: 100%;
margin: 0 200px;
background: skyblue;
}
</style>
三、Table布局
布局分析:
| 布局方案 |
实现 |
优点 |
缺点 |
| Table布局 |
左中右三列，父元素display: table;子元素display: table-cell;居中子元素不设宽度 |
使用起来方便,兼容性也不存在问题 |
①无法设置栏边距；②对seo不友好；③当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高的 |
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="left">Left</div>
<div class="main">Main</div>
<div class="right">Right</div>
</div>
</body>
</html>
<style>
body,
html {
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
.container {
display: table;
width: 100%;
}
.container>div {
display: table-cell;
}
.left {
width: 200px;
background: pink;
height: 400px;
}
.main {
background: skyblue;
}
.right {
width: 200px;
background: pink;
}
</style>
四、Flex布局
布局分析:
| 布局方案 |
实现 |
优点 |
缺点 |
| Flex布局 |
左中右三列，父元素display: flex;两侧元素设宽；居中子元素flex: 1; |
比较完美 |
存在IE上兼容性问题，只能支持到IE9以上 |
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="left">Left</div>
<div class="main">Main</div>
<div class="right">Right</div>
</div>
</body>
</html>
<style>
body,
html {
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
.container {
display: flex;
height: 100%;
}
.left {
width: 200px;
background: pink;
}
.main {
flex: 1;
background: skyblue;
}
.right {
width: 200px;
background: pink;
}
</style>
五、Grid布局
布局分析:
| 布局方案 |
实现 |
优点 |
缺点 |
| Grid布局 |
左中右三列，父元素display: grid;利用网格实现 |
最强大和最简单 |
兼容性不好，IE10+上支持，而且也仅支持部分属性 |
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="left">Left</div>
<div class="main">Main</div>
<div class="right">Right</div>
</div>
</body>
</html>
<style>
body,
html {
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
.container {
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 200px auto 200px;
}
.left {
background: pink;
}
.main {
background: skyblue;
}
.right {
background: pink;
}
</style>
