CSS3 浮动布局

浮动

下列是设置浮动相关的一些属性。

属性含义
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>

布局效果

头部
侧边拦
内容
尾部
更多教程 HTML5 教程 CSS3 教程 JavaScript 教程 JQuery 教程 React.js 教程 Node.js 教程 Koa2 教程 Python 教程 Linux 教程