当元素的float属性的取值为left或right时，元素属于浮动定位

盒子的位置

左浮动的盒子向上向左排列

右浮动的盒子向上向右排列

注：浮动盒子的顶边不得高于上一个盒子的顶边；

若剩余的空间无法放下浮动的盒子，则该盒子向下移动；

直到具备足够的空间能容纳下盒子，然后再向左或向右移动。

常规流盒子和浮动盒子混合摆放

浮动盒子在摆放时，要避开常规流盒子；

常规流盒子在摆放时，无视浮动盒子；
    注释：在设置浮动时，浮动盒子会脱离文档流；文档流表示浮动元素的内容不占用父级区域（content）；

    文档脱离会导致高度坍塌；（因为常规流盒子会无视浮动盒子）

    解决文档坍塌除了用（overflow：hidden；）找回坍塌的高度；还可以用清除浮动（clear：both；）找回坍塌高度
实现效果示例：

HTML代码实现：

<!DOCTYPE html>
 <html> 
<head lang="en">     <meta charset="UTF-8">    
 <title></title>     
<!-- 先引用重置文件再引用css样式表-->   
  <link rel="stylesheet" href="../CSS/reset.css"/>   
  <link rel="stylesheet" href="../CSS/fudong.css"/>
 </head>
 <body>     
<header>         
<nav>            
 <a href="#">首页</a>             
<a href="#">易牛课堂</a> 
 <a href="#">易牛班级</a> 
<a href="#">易牛资讯</a> 
<a href="#">话题小组</a> 
</nav> 
<aside> 
 <a href="#">登录</a> 
 <a href="#">注册</a> 
 </aside> 
 </header> 
 <div> 
 <section>
 
 </section> 
<article> 
 <aside>
 
</aside> 
<aside>
 
 </aside> 
 <aside> 
 </aside> 
<aside>
</aside> 
<aside>
 
</aside> 
 <aside>
 
</aside> 
 <aside>
 
 </aside> 
 </article> 
 <aside> 
 </aside> 
 </div> 
<p> 
<a href="#">返回顶部</a> 
 
</p> 
 <footer> 
<div> 
 <p> 我是管理员</p>
 
<p>用户管理</p>
 
 <p>课程管理</p> </div> <div> <p>我是学生</p>
 
 <p>如何注册</p>
 
 <p>购买课程</p> 
 </div> 
 <div> 
<p>商业应用</p>
 
 <p>商务合作</p>
 <p>内容招募</p> 
 </div> 
 <div> 
<p>联系我们</p>
 
<p>关于我们</p>
 
<p>联系我们</p> 
</div> 
 <div> 
<p>系统帮助</p>
 
<p>购买课程</p>
 
<p>作业提交</p> 
 </div> 
 </footer> 
</body> 
</html>
CSS代码实现：

/*给header设置背景色，高度为50像素*/ body>header{ background-color: #534141; height: 50px; overflow: hidden; } /*把导航看作一个整体，给导航设置左边框30像素，向左浮动，为了nav标签在header标签中显示的效果居中所以 给外上边框设置15像素*/ body>header>nav{ margin-left: 30px; float: left; margin-top: 15px; } /*设置header元素内的nav标签内的a标签的字体、颜色、内边距像素17*/ body>header>nav>a{ font-size: 16px; color: #e6e6e6; padding: 17px; } /*设置nav元素下的a标签在鼠标悬停时的颜色和背景色*/ nav a:hover{ color: #fff; background-color: #e12929; } /*把标签aside的元素内容看作一个整体，根据效果图可以看出右外边框的值是30像素 并且向右浮动，*/ header>aside{ margin-right: 30px; float: right; margin-top: 15px;
} /*设置heade元素下的a标签，字体、颜色、内边距为17像素*/ header>aside>a{ font-size: 16px; color: #e6e6e6; padding: 17px; } /*设置heade元素下的a标签在鼠标悬浮时的颜色、背景色*/ aside a:hover{ color: #fff; background-color: #e12929; } /*设置div元素下的article标签的宽高、边框、上下外边款30像素是效果图展示的， 左右外边框取自动值（auto）是根据效果图可以知道元素内容是居中显示的*/ body>div{ width: 700px; height: 800px; background-color: #f1e4e4; /*border: 1px solid black;*/  padding: 30px; margin:30px auto;
} body>div>section{ width: 100%; height: 50px; background-color:#534141 ; /*margin-bottom: 50px;*/ } body>div>article{ overflow: hidden; margin: 50px 0px 50px 0px; } body>div>article>aside{ width: 100px; height: 100px; background-color: #e58282; margin:0px 15px; float: left; } body>div>article>aside:nth-child(6) { margin-top: 30px; } body>div>article>aside:nth-child(7) { margin-top: 30px; } body>div>aside{ width: 100%; height: 50px; background-color:#534141 ; /*margin-bottom: 50px;*/ } body>p{ font-size: 18px; text-align: center; width: 50px; height: 50px; border: 1px solid #534141; position: fixed; bottom: 100px; right: 50px; } /*给整个footer的背景色、高度设置好*/ footer{ background-color: #534141; height: 200px; } /*设置footer元素下的所有div标签设置向左浮动，并且设置上、左内边距为50像素*/ footer>div{ padding-top: 50px; padding-left: 50px; float: left; }
footer>div>p:first-child{ font-size: 16px; color: #fff; } footer>div>P { font-size: 14px; color: #e6e6e6; padding-right: 10px; padding-bottom: 10px; }

当元素的float属性的取值为left或right时，元素属于浮动定位

Guess you like