实现效果
通过下面的方法实现三列布局，最终实现的结果都如下所示：
float+BFC实现
基本思路：其中两列使用float实现固定，另外一列这是通过触发BFC，利用BFC盒子不会与浮动盒子解除从而实现三列布局，其中两列是固定宽度，一列是自适应宽度。
注意点：因为触发BFC的盒子是自适应的，所以它宽度总是占满余下的所有空间，因此如果是两边固定宽度且使用float固定，中间自适应，那么在设置的时候应该先设置浮动的两个盒子；如果你先设置一个浮动盒子，然后立马放BFC盒子，由于BFC盒子的宽度会占满余下的所有空间，会导致第二个浮动的盒子被强制换行。正确代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 .box { 10 height: 200px; 11 } 12 13 .outside { 14 width: 200px; 15 } 16 17 .main { 18 overflow: hidden; 19 background-color: skyblue; 20 } 21 22 .left { 23 float: left; 24 width: 50px; 25 background-color: red; 26 } 27 28 .right { 29 float: right; 30 width: 50px; 31 background-color: pink; 32 } 33 </style> 34 </head> 35 36 <body> 37 <div class="box outside"> 38 <div class="box left"></div> 39 <div class="box right"></div> 40 <div class="box main"></div> 41 </div> 42 43 </body> 44 45 </html>
设置左右外边距实现
基本思路：设置两个固定宽度的盒子左右浮动，分别排列到两侧，由于浮动的盒子不再占据文档里，此时中间的盒子还在文档流，那么中间盒子就会被浮动盒子遮盖，所以我们给中间的盒子设置左右外边距，通过左右外边距实现了中间盒子不被浮动盒子遮盖实现三列布局。这个可以实现两栏固定宽度，一栏宽度自适应。
注意点：要熟悉浮动的基本概念，同时也要熟悉外边距的实现。代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 .box { 10 height: 200px; 11 } 12 13 .outside { 14 width: 200px; 15 } 16 17 .main { 18 margin-left: 50px; 19 margin-right: 50px; 20 background-color: skyblue; 21 } 22 23 .left { 24 float: left; 25 width: 50px; 26 background-color: red; 27 } 28 29 .right { 30 float: right; 31 width: 50px; 32 background-color: pink; 33 } 34 </style> 35 </head> 36 37 <body> 38 <div class="box outside"> 39 <div class="box left"></div> 40 <div class="box right"></div> 41 <div class="box main"></div> 42 </div> 43 44 </body> 45 46 </html>
position实现
基本思路：通过子绝父相实现三列布局，注意：这种方式不能实现两列固定宽度，一栏自适应宽度。必须要计算好三列各自的宽度！
注意点：要熟悉定位中的子绝父相规则。实现如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 .box { 10 height: 200px; 11 } 12 13 .outside { 14 width: 200px; 15 position: relative; 16 } 17 18 .main { 19 width: 100px; 20 position: absolute; 21 top: 0; 22 left: 50px; 23 background-color: skyblue; 24 } 25 26 .left { 27 width: 50px; 28 position: absolute; 29 top: 0; 30 left: 0; 31 background-color: red; 32 } 33 34 .right { 35 width: 50px; 36 position: absolute; 37 top: 0; 38 right: 0; 39 background-color: pink; 40 } 41 </style> 42 </head> 43 44 <body> 45 <div class="box outside"> 46 <div class="box left"></div> 47 <div class="box right"></div> 48 <div class="box main"></div> 49 </div> 50 51 </body> 52 53 </html>
display:table 实现
基本思路：都知道，在上古时期网页布局主要是通过表格的方式实现，但是现在网页布局都是通过div+css的方式来实现的。不过有些时候我们仍然需要使用表格来布局，但是！如果我们直接使用标签table来布局，就做不到语义化的要求，因此就有了display:table 的出现。基本了解如下知识点：
| display属性值 | 代表含义 |
| table | （类似 <table>）此元素会作为块级表格来显示，表格前后带有换行符。 table时padding会失效 |
| table-row | （类似 <tr>）此元素会作为一个表格行显示。 table-row时margin、padding同时失效 |
| table-cell | （类似 <td> 和 <th>）此元素会作为一个表格单元格显示。 table-cell时margin会失效 |
table系列的属性不止以上所列，要知道更多的可以去百度查询。但是知道了如下几个之后我们就可以实现三列布局的实现。
注意点：table表格中的单元格最大的特点之一就是同一行列表元素都等高。所以，很多时候，我们需要等高布局的时候，就可以借助display:table-cell属性。说到table-cell的布局，不得不说一下“匿名表格元素创建规则”：
CSS2.1表格模型中的元素，可能不会全部包含在除HTML之外的文档语言中。这时，那些“丢失”的元素会被模拟出来，
从而使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿名table对象，使其符合table/inline-table、table-row、table- cell的三层嵌套关系。
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 .box { 10 height: 200px; 11 } 12 13 .outside { 14 width: 200px; 15 display: table; 16 } 17 18 .row { 19 display: table-row; 20 } 21 22 .main { 23 width: 100px; 24 display: table-cell; 25 background-color: skyblue; 26 } 27 28 .left { 29 width: 50px; 30 display: table-cell; 31 background-color: red; 32 } 33 34 .right { 35 width: 50px; 36 display: table-cell; 37 background-color: pink; 38 } 39 </style> 40 </head> 41 42 <body> 43 <div class="box outside"> 44 <div class="row"> 45 <div class="box left"></div> 46 <div class="box main"></div> 47 <div class="box right"></div> 48 </div> 49 </div> 50 51 </body> 52 53 </html>
Flex 伸缩布局
基本思路：Flex布局有点类似于bootstrap的栅格布局。
注意点： Flex 的兼容性有问题。
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 .box { 10 height: 200px; 11 } 12 13 .outside { 14 width: 200px; 15 display: flex; 16 } 17 18 .main { 19 width: 100px; 20 background-color: skyblue; 21 } 22 23 .left { 24 width: 50px; 25 background-color: red; 26 } 27 28 .right { 29 width: 50px; 30 background-color: pink; 31 } 32 </style> 33 </head> 34 35 <body> 36 <div class="box outside"> 37 <div class="box left"></div> 38 <div class="box main"></div> 39 <div class="box right"></div> 40 </div> 41 42 </body> 43 44 </html>