29、CSS浮动、清除浮动与垂直对齐属性详解

CSS浮动、清除浮动与垂直对齐属性详解

1. CSS多列布局与浮动属性

在CSS中，我们可以利用浮动属性来实现多列布局。如图所示，当第三个段落浮动在左右浮动的段落之间时，它的文本会填充左右浮动段落之间的所有可用空间，这就是实现多列布局的一种基础技术。

以下是实现三列布局的示例代码：

body {
    margin: 0;
    padding: 8px;
}
p {
    border: 1px solid black;
    padding: 10px;
    background: rgb(218, 218, 218);
    margin: 10px;
}
p#left {               
    float: left;
    width: 200px;
}
p#right {
    float: right;
    width: 200px;
}
p#center {
    margin: 10px 231px;
}

对应的HTML标记如下：

<p id='left'>
    This is the text of the first paragraph.
</p>
<p id='right'>
    This is the text of the second paragraph.
</p>
<p id='center'>
    This is the text of the third parag