1.使用float属性。
css:
.left{
float:left;
width:200px;
height:100px;
background:blue;
}
.middle{
height:100px;
margin:0 200px;
background:black;
}
.right{
float:right;
width:200px;
height:100px;
background:green;
}
html:
<body>
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</body>
注意middl层的标签位置应写在最后面。
2.使用position属性
css:
.left{
position: absolute;
top:0;
left:0;
width:200px;
height:100px;
background:blue;
}
.middle{
height:100px;
margin:0 200px;
background:black;
}
.right{
position: absolute;
top:0;
right:0;
width:200px;
height:100px;
background:green;
}
html:
<body>
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</body>
3.BFC（块级格式化上下文）
css:
.left{
float:left;
width:200px;
height:100px;
background:blue;
}
.middle{
height:100px;
overflow:hidden;/*触发BFC格式*/
background:black;
}
.right{
float:right;
width:200px;
height:100px;
background:green;
}
html:
<body>
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</body>
注意这里的middl层的标签位置也应写在最后面。
BFC是W3C CSS 2.1规范中的一个概念，决定了元素如何对内容进行定位，以及与其他元素的关系和相互作用。下表就是成为BFC元素后的特性以及如何成为BFC。
BFC元素最重要的一点就是与外部元素不影响，即碰到浮动元素也不会与其重叠。
