上一章CSS高级教程请查看：css浮动属性float
CSS有几个属性可以用来对齐web页面上的元素。
文本对齐方式block-level元素中的文本可以通过正确设置text-align来进行对齐。
h1 {
text-align: center;
}
p {
text-align: left;
}
有关文本格式的更多信息，请参见本CSS教程。
使用margin属性进行居中对齐块级元素的居中对齐是CSS margin属性最重要的含义之一，例如，< div> 容器可以通过将左右边距设置为auto来水平居中对齐。
div {
width: 50%;
margin: 0 auto;
}
上面示例中的样式规则将< div> 元素水平对齐。
注意：除非指定< ！DOCTYPE> ，否则margin属性的值auto在Internet Explorer 8和更早版本中将不起作用。
使用position属性对齐元素CSS位置与left，right，top和bottom属性结合使用，可以使元素相对于文档的视口对齐或包含父元素。
.up {
position: absolute;
top: 0;
}
.down {
position: absolute;
bottom: 0;
}
要了解更多关于定位元素的信息，请参阅CSS定位教程。
使用浮动属性对左右对齐float CSS属性可用于将元素对齐到其包含块的左侧或右侧，从而使其他内容可以沿着其一侧流动。
因此，如果元素向左浮动，则内容将沿其右侧流动。相反，如果元素向右浮动，则内容将沿其左侧流动。
div {
width: 200px;
float: left;
}
清除浮动使用基于浮动的布局最令人困惑的事情之一是父布局的折叠，父元素不会自动展开以容纳被浮动的元素。不过，如果父类不包含任何视觉上明显的背景或边框，这并不总是显而易见的，但必须注意这一点，并必须加以处理，以防止出现奇怪的布局和跨浏览器问题。见下图:
文章图片
可以看到，< div> 元素没有自动展开以适应浮动的图像。这个问题可以通过清除容器中被浮动元素之后、容器元素的结束标记之前的浮动来解决。
修复父元素折叠有几种方法可以修复CSS折叠父元素的问题。下面将介绍这些解决方案和实际示例。
解决方案1：浮动容器
修复此问题的最简单方法是浮动包含的父元素。
.container {
float: left;
background: #f2f2f2;
}
警告：此修复程序仅在有限的情况下有效，因为浮动父元素可能会产生意外的结果。
解决方案2：使用空Div
这是一种老式的方法，但却是一种简单的解决方案，适用于所有浏览器。
.clearfix {
clear: both;
}
/* html代码片段 */
<
div class="clearfix"> <
/div>
你也可以通过< br> 标记来实现这一点，但是不推荐使用此方法，因为它将非语义代码添加到标记中。
解决方案3：使用:after伪元素
【css元素对齐属性 – CSS高级教程】与content属性一起使用的:after伪元素已被广泛用于解决浮动清除问题。
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix类适用于任何具有浮动子代的容器。
警告：Internet Explorer up IE7不支持：after伪元素，但是支持IE8，但需要声明< ！DOCTYPE> 。
推荐阅读
- css伪类和伪类选择器 – CSS高级教程
- css浮动属性float – CSS高级教程
- css图层z-index元素叠加 – CSS高级教程
- css position定位属性 – CSS高级教程
- css元素的可视属性visibility – CSS高级教程
- css display显示属性 – CSS高级教程
- css可视格式化模型 – CSS高级教程
- css属性单位 – CSS高级教程
- css维度属性 – CSS高级教程