想要实现三个盒模型并列排放，可以使用float属性，float有left，right，none...等多种属性值，具体如下
<!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>
</head>
<style>
.mid{
width: 700px;
height: 200px;
background-color:white;
border: 1px solid black;
margin: auto;
font-size: 30px;
font-style :italic ;color: maroon;
float: none;
}
.right{
width: 200px;
height: 1000px;
border: 1px solid black;
/* margin: auto; */
font-size: 30px;
margin-top: auto;
font-style :italic ;color: maroon;
float: right;
}
.left{
width: 200px;
height: 1000px;
border:1px solid #fa7d3c;
margin-left:10px ;
margin-top: auto;
float: left;
}
</style>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="mid">ca</div>
</body>
</html>
结果为
如果body，标签中的三个div排列不同，显示的结果也有所不同