内联元素从左向右 块级元素从上向下 各占一行
这是标准盒子模型，可以看到width的长度等于content的宽度；而当将box-sizing的属性值设置成border-box时，盒子模型的width=border+padding+content的总和。对于不同的模型的宽度是不同的。宽度默认的属性值是auto，这个属性值会使得内部元素的长度自动填充满父元素的width。
边栏浮动，主栏留出相应的margin
<body> <div class="left">定宽</div> <div class="right">自适应</div> </body> <style> .left{ width: 200px; height: 600px; background: red; float: left; display: table; text-align: center; line-height: 600px; color: #fff; } .right{ margin-left: 210px; height: 600px; background: yellow; text-align: center; line-height: 600px; } </style>左侧栏宽度固定并绝对定位在最左侧，右侧主栏设置一个margin-left为边栏的宽度
<body> <div id = "main"></div> <div id = "aside"></div> </body> <style> #aside{ position:absolute; left:0; width:200px; } #main{ margin-left:200px; } </style>左右侧栏分别用绝对定位固定在左侧和右侧，中间栏用margin-left和margin-right空出左右位置
左侧栏和右侧栏向左和向右浮动，中间栏放在最后利用左右边距margin空出左右位置
思想：
1.就是先预留左右区域，让三个div在中间的一块区域，2.让他们都float起来，然后设置中间的div的width：100%，其他两个div会变到下一行3.设置margin-left:-100%,让左栏浮到上面，右栏就会占据原理左栏的位置，设置margin-left:为负的右栏的宽，这样中间栏左右就被覆盖4.再设置position:relative 让覆盖的部分出现 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>实现三栏水平布局之圣杯布局</title> <style> .wrap { padding: 0 300px 0 200px; } .left, .right, .main { min-height: 200px; float: left; /* 设置最小高度 */ } .left { background-color: green; width: 200px; margin-left: -100%; position: relative; left: -200px; } .right { background-color: red; width: 300px; margin-left: -300px; position: relative; right: -300px; } .main { background-color: blue; width: 100%; } </style> </head> <body> <div class="wrap"> <div class="main">main</div> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>思想：与圣杯布局类似，就是多加了一个div，在左右把中间覆盖时，中间里的那个div设置margin来显示我们的内容，感觉比圣杯好
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>实现三栏布局之双飞翼布局</title> <style> .left, .right, .main { float: left; min-height: 130px; } .left { background-color: red; width: 200px; margin-left: -100% } .main { background-color: blue; width: 100%; } .right { background-color: green; width: 300px; margin-left: -300px; } .content { margin: 0 300px 0 200px; } </style> </head> <body> <div class="container"> <div class="main"> <div class="content">content</div> </div> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>这个最好，简单易懂
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>flex布局实现两边宽度固定中间自适应的三列布局</title> <style> .wrap { display: flex; } .main { flex-grow: 1; /* 自动适应 */ background-color: red; } .left { flex-basis: 200px; background-color: green; order: -1; /* 默认为0 值越小 越靠前 不然按从上到下解析 */ } .right { flex-basis: 300px; /* flex-basis 为基准值,当其为0%时，有width也没用,这是总宽度就取决于flex-grow 所占据的值 */ background-color: hotpink; } </style> </head> <body> <div class="wrap"> <div class="main"></div> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>1.float的原始意义： 使文字环绕在图片周围，仅此而已。实现原理： float属性可以使图片（img）脱离文档流，但是它还占据正常文档流的文本空间，浮动后的图片可以浮在其他元素之上，但是图片不会遮挡文字，文字环绕在图片的周围。
2、float的2个属性①包裹性：添加了float属性的元素会自动加上一个“块级框”，即可以设置元素的宽高。 就float的包裹性而言，其实和display： inline-block；属性的效果是一样的。会在水平方向上排列，并且可以设置元素的宽高。唯一的区别就是：float是有方向性的，display: inline-block;是没有方向性的。②破坏性：float属性破坏元素的inline-box模型，使之没有line-height值（文字环绕图片、父级元素的高度塌陷 问题）
