两列（一侧定宽，一侧自适应）布局：
<!DOCTYPE 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>Document</title>
<style>
*{
margin:0;
}
.main{
height:600px;
overflow:hidden;
}
.left{
float: left;
background-color: aquamarine;
width: 500px;
height: 600px;
}
.right{
margin-left:500px;
background-color: cornflowerblue;
height:600px;
}
</style>
</head>
<body>
<div class="main">
<div class="left">航啊时代科技鞍山市打个卡四大金刚了阿斯兰的就够了阿</div>
<div class="right">里克森点击率高家里四大金刚拉手机端了估计安禄山的价格了啊僵尸脸的价格l</div>
</div>
</body>
</html>
在css布局中最有名的也是最基础的布局当属“圣杯布局”和“双飞翼布局”，它们属于三列（左中右）布局，两边定宽，中间自适应，基本可以满足大部分基础布局需求。
圣杯布局 (三列（左中右）布局，经测试无误可以正常使用)：
<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>Document</title>
<style>
*{
margin:0;
}
body{
min-width: 850px;
}
.header {
width: 100%;
height: 100px;
background: red;
}
.container{
padding:0 250px 0 300px;
}
.main,.left,.right{
float: left;
}
.main{
width:100%;
background-color: burlywood;
}
.left{
width:300px;
background-color: crimson;
margin-left:-100%;
position: relative;
left: -300px;
}
.right{
width:250px;
background-color: brown;
height: 600px;
margin-right:-250px;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="container">
<div class="main">hoahso爱过后好哦好多个傲娇的攻角度讲过奥四大金刚</div>
<div class="left">asdfasd 过后好哦好多个傲娇的攻角度讲过奥四asd</div>
<div class="right">过后好哦好多个傲娇的攻角度讲过奥四过后好哦好多个傲娇的攻角度讲过奥四</div>
</div>
<div class="footer"></div>
</body>
</html>
效果如下：
双飞翼布局（三列（左中右）布局，经测试无误可以正常使用）：
<!DOCTYPE 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>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: #FFFFE0;/*便于观看加的样式*/
min-width:1000px;
}
header{
height:30px;
background: gray;
text-align: center;
}
footer{
clear: both;
height:30px;
background: gray;
text-align: center;
}
.middle,.left,.right{
float: left;
}
.middle{
width: 100%;
}
.middle .inside{
margin-left:200px;
margin-right:150px;
background-color: darksalmon;
}
.left{
width: 200px;
background-color: chartreuse;
margin-left:-100%;
}
.right{
width: 150px;
background-color:darkred;
margin-left:-150px;
}
</style>
</head>
<body>
<header>我是双飞翼头部区域</header>
<div class="middle">
<div class="inside">b<h1>This is the main content.</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<!--文字仅供测试无意义-->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<!--文字仅供测试无意义-->
</div>
</div>
<div class="left"><h2>This is the left sidebar.</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<!--文字仅供测试无意义-->
</div>
<div class="right">
<h2>This is the right sidebar.</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan .</p>
<!--文字仅供测试无意义-->
</div>
<footer>我是双飞翼底部区域</footer>
</body>
</html>
效果如下：
css元素居中：
css元素居中方式多大十几种，各种思路各种写法一通秀，简直举不胜举，平常使用中基本只要掌握7，8种就可以应付日常的所有业务要求了，具体就不一一列举了，掘金的这位总结的比较全面，可以学习一下，css居中大全。
text-align两端对齐
text-align:justify在布局使用中也是经常使用的，需要注意的是text-align:justify对第一行内容不起作用，而且只对最后一行之前的行生效，如果你只有一行则需特殊处理。一般惯用的的方法是使用伪元素::after。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<style>
.contain{
width: 800px;
background-color: red;
text-align: justify;
margin:0 auto;
font-size:0;
}
.contain span{
background-color: yellow;
display: inline-block;
font-size:18px;
}
.contain:after{
content: "";
display: inline-block;
width:100%;
overflow:hidden;
height: 0;
}
</style>
</head>
<body>
<div class="contain">
<span>所有所有所有所有所有</span>
<span>框架所有所有所有</span>
<span>vue所有所有所有</span>
<span>原生JS所有所有</span>
</div>
</body>
</html>
效果如下：
另外一种是使用text-align-last:justify,MDN上面显示目前的浏览器都支持，但是该属性经过个人测试发现ie11和edge浏览器都不支持，解决方法如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<style>
.contain{
width: 800px;
margin:0 auto;
background-color: red;
text-align-last: justify;
}
.ceshi{
text-align: justify;
}
.contain span{
background-color: yellow;
display: inline-block;
}
</style>
</head>
<body>
<div class="contain">
<div class="ceshi">
<span>所有</span>
<span>框架</span>
<span>vue</span>
<span>原生JS</span>
</div>
</div>
</body>
</html>
效果如下：
与伪元素：after方法相比，这个方法多了一层div进行包含嵌套，并设置该div样式为text-align: justify;即可在iell和edge浏览器下正常显示，具体原理暂不清楚，
这两种方法可以解决最后一行元素不对齐问题。
