1.float+margin
html部分
<div class="container">
<div class="left">11</div>
<div class="right">33</div>
<div class="main">22</div>
</div>
css部分
.left{
float:left;
height: 200px;
width: 200px;
background-color: green;
}
.right{
float:right;
width: 200px;
height: 200px;
background-color: red;
}
.main{
background-color: pink;
height: 200px;
margin-left:200px;
margin-right:200px;
}
实现原理:两边使用float固定在左右两侧,留出中间的空白。
优点:结构清晰,实现较为简单,兼容性好。
缺点:
主体内容无法最先加载,当页面内容较多时,影响用户体验。
浮动会脱离文档流,必要时候,需要清除浮动,如果处理不好的话,页面布局会出现问题。
兼容性:所有主流浏览器都支持
2.float+overflow
其他同上
.main{
background-color: pink;
height: 200px;
overflow:hidden;
}
该方法出发bfc从而达到自适应
3.flex布局
html结构
<div class="container">
<div class="left">11</div>
<div class="main">33</div>
<div class="right">22</div>
</div>
css布局
.container{
display:flex;
}
.left{
height: 200px;
width: 200px;
background-color: green;
}
.right{
width: 200px;
height: 200px;
background-color: red;
}
.main{
background-color: pink;
height: 200px;
flex:1;
}
4.通过table实现
html部分
<div class="container">
<div class="left">11</div>
<div class="main">33</div>
<div class="right">22</div>
</div>
css部分
.container{
display:table;
width:100%;
}
.left{
display:table-cell;
height: 200px;
width: 200px;
background-color: green;
}
.right{
display:table-cell;
width: 200px;
height: 200px;
background-color: red;
}
.main{
background-color: pink;
height: 200px;
display:table-cell;
}
5.通过position来实现
html部分
<div class="container">
<div class="left">11</div>
<div class="right">33</div>
<div class="main">22</div>
</div>
css部分
.container{
position:relative;
}
.left{
position:absolute;
left:0;
height: 200px;
width: 200px;
background-color: green;
}
.right{
position:absolute;
width: 200px;
height: 200px;
background-color: red;
right:0;
}
.main{
background-color: pink;
height: 200px;
margin:0 200px;
}
6.圣杯布局
html结构
<div class="container">
<div class="main">22</div>
<div class="left">11</div>
<div class="right">33</div>
</div>
css模块
.container{
position:relative;
margin-left:200px;
margin-right:200px;
}
.left{
position:relative;
left:-200px;
float:left;
margin-left:-100%;
height: 200px;
width: 200px;
background-color: green;
}
.right{
position:relative;
right:-200px;
width: 200px;
height: 200px;
background-color: red;
float:left;
margin-left:-200px;
}
.main{
background-color: pink;
float:left;
height: 200px;
width:100%;
}
7.双飞翼布局
html结构
<div class="content">
<div class="main">22</div>
</div>
<div class="left">11</div>
<div class="right">33</div>
css结构
.content{
float:left;
width:100%;
}
.left{
float:left;
margin-left:-100%;
height: 200px;
width: 200px;
background-color: green;
}
.right{
width: 200px;
height: 200px;
background-color: red;
float:left;
margin-left:-200px;
}
.main{
height: 200px;
background-color: pink;
margin-left:200px;
margin-right:200px
}