给子元素加float:left;给父元素的class加上clearfix。
但是要给父元素清除高度塌陷
代码如下：
.clearfix:befor,
.clearfix:after{
content:’’;
display:block;
}
.clearfix{
clear:both;
}
CSS左中右布局
float+absolute方式：
<style type=”text/css”>
#content{
position: relative;
width:100%;
height:300px;
}
.left{
float: left;
width: 200px;
height:100%;
background-color: #00a0dc;
}
.middle{
position: absolute;
top:0;
bottom:0;
left:200px;
right: 300px;
background-color: red;
}
.right{
float: right;
height:100%;
width: 300px;
background-color: #00a0dc;
}
</style>
float+margin方式：
<style type=”text/css”>
#content{
height:300px;
}
.left{
width: 200px;
height:100%;
float: left;
background-color: #00a0dc;
}
.middle{
height:100%;
margin-left:200px;
margin-right: 300px;
background-color: red;
}
.right{
height:100%;
width: 300px;
float: right;
background-color: #00a0dc;
}
</style>
HTML代码：
<div id=”content”>
<div class=”left”></div>
<div class=”middle”></div>
<div class=”right”></div>
</div>
水平居中
margin和width实现水平居中：
在分页容器上定义一个宽度，然后配合margin的左右值为“auto”实现效果：
.pagination {
width: 293px;
margin-left: auto;
margin-right: auto;
}
.pagination li {
line-height: 25px;
display: inline;
float: left;
margin: 0 5px;
inline-block实现水平居中：
要在元素的父容器中设置text-align的属性为“center“：
.pagination {
text-align: center;
font-size: 0;
letter-spacing: -4px;
word-spacing: -4px;
}
.pagination li {
line-height: 25px;
margin: 0 5px;
display: inline-block;
*display: inline;
zoom:1;
letter-spacing: normal;
word-spacing: normal;
font-size: 12px;
}
CSS垂直居中
方法1：使用了一个 position:absolute，有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0;。但是因为它有固定高度，其实并不能和上下都间距为 0，因此 margin:auto; 会使它居中。使用 margin:auto;使块级元素垂直居中是很简单的。
<div id=”content”> Content here</div>
#content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 240px;
width: 70%;
}
方法2：只能将单行文本置中。只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。
<div id=”content”> Content here</div>
#content {
height: 100px;
line-height: 100px;
}