下列是设置浮动相关的一些属性。
| 属性 | 含义 |
|---|---|
| float | 浮动 |
| clear | 清除浮动 |
浮动布局是较早期的，一种针对PC页面排版的布局方式，目前仍然广泛的被应用，下面是浮动局部的基础实例。
<!-- CSS 设置浮动布局 -->
#page {
width: 500px;
height: 500px;
}
header {
background:#FA8072;
width:500px;
height:100px;
float:left;
}
aside {
background:#FFA07A;
width:150px;
height:300px;
float:left;
}
details {
background:#FFA500;
width:350px;
height:300px;
float:right;
}
footer {
background:#FF8C00;
width:500px;
height:100px;
float:left;
}
<!-- 网页主体 -->
<div id="page">
<header>头部</header>
<aside>侧边拦</aside>
<details>内容<details/>
<footer>尾部<footer/>
</div>布局效果