当元素的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: 50