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>

效果

CSS3 教程 CSS3 入门 CSS3 选择器 CSS3 颜色 CSS3 单位 CSS3 字体 CSS3 文本 CSS3 光标 CSS3 盒子模型 CSS3 边框 CSS3 边距 CSS3 列表 CSS3 表格 CSS3 背景 CSS3 效果 CSS3 浮动 CSS3 定位 CSS3 响应式 CSS3 Columns CSS3 Flex