前端常见的布局方式
浮动布局
左右固定宽高，设置左右浮动，中间内容设置overflow:hidden宽度自适应
<!--样式代码-->
<style>
.left {
width: 200px;
height: 300px;
float: left;
background-color: red;
}
.right {
width: 200px;
height: 300px;
float: right;
background-color: green;
}
.middle {
height: 300px;
overflow: hidden; /*重要的一步*/
background-color: gray;
border: 1px solid #000;
}
</style>
<!--结构代码-->
<body>
<!--注意书写结构顺序，先左右后中-->
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</body>
运行效果：
圣杯布局
三个盒子都设置为浮动，浮动方向都为同一方向，中间内容盒子设置width: 100%,两边内容固定宽高，假设浮动方向都为left，那么左边盒子设置margin-left: -100%; 右边盒子设置为margin-left为负的自身宽度，书写dom结构时先写中间内容的盒子，再写左右盒子
<!--样式-->
<style>
.middle {
width: 100%;
height: 300px;
background-color: gray;
float: left;
}
.left {
width: 200px;
height: 300px;
background-color: red;
float: left;
margin-left: -100%;
}
.right {
width: 200px;
height: 300px;
background-color: green;
float: left;
margin-left: -200px;
}
</style>
<!--结构-->
<body>
<!--先写中间的内容区域-->
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</body>
运行效果：
双飞翼布局
基本上和圣杯布局没什么两样，无非就是中间内容盒子里面在嵌套一个子元素，并设置这个子元素的左右两边的margin为左右两边盒子的宽度
<!--样式-->
<style>
.middle {
width: 100%;
height: 300px;
background-color: gray;
float: left;
}
.middle-content {
margin: 0 200px;
}
.left {
width: 200px;
height: 300px;
background-color: red;
float: left;
margin-left: -100%;
}
.right {
width: 200px;
height: 300px;
background-color: green;
float: left;
margin-left: -200px;
}
</style>
<!--结构-->
<body>
<!--先写中间的内容区域-->
<div class="middle">
<div class="middle-content">这是中间内容</div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
运行效果：
