CSS3 浮动

浮动

浮动是一种常见的网页布局方式。

<style type="text/css">
#page {
 width: 500px;
 height: 500px;
}

header {
 background: #89f8ce; 
 width: 500px; 
 height: 100px; 
 float: left; /* 左浮动 */
}

aside {
 background: #f5fac7; 
 width: 150px; 
 height: 300px; 
 float: left;
}

details {
 background: #dec8ed; 
 width: 350px; 
 height: 300px; 
 float: right; /* 右浮动 */
}

footer {
 background: #cc99f9; 
 width: 500px; 
 height: 100px; 
 float: left;
}
</style>

<!-- 网页主体 -->

<div id="page">
 <header></header> 
 <aside></aside> 
 <details></details>
 <footer></footer> 
</div>

<!-- 浮动效果会影响到后面的元素，导致一些元素明明没有设置浮动却飘了起来，使用 clear 可以清除 -->

<div style="clear: both;"> 清除两边浮动 </div>

效果