浮动之后的那些事儿 - 清浮动操作
浮动之后的那些事儿 - 清浮动操作
本文内容概要：
1 上周作业讲解
2 浮动之后的特性
3 如何清浮动
4 实例操作
上周我们讲解了如何去实现页面的简单布局，用了三种基本的CSS选择器来控制标签的样式，同时通过盒模型为每个标签设置了大小与位置，最后为了让多个块元素展示在同一行，我们讲解了浮动操作。那今天我们继续浮动这个话题，来讲讲浮动之后发生的那些事~~~
一、上周作业讲解
在讲解前，我们一起来看看上周留给大家的作业，相信大家参照上周的知识点都可以把作业布局出来，那我们一起来看看这个作业具体是怎做出来的。如果想了解作业的参考答案，请前往GitHub：https://github.com/iceswan/htmlDemo/tree/master/homework/%E6%B5%AE%E5%8A%A8%E4%BD%9C%E4%B8%9A%E8%AE%B2%E8%A7%A3%20-%20HTML5%E5%AD%A6%E5%A0%82
代码效果如下：
参照上面的代码，我们就完成了上周的作业了，但是这时候我们倘若打开浏览器的控制台去查看每一个块的样式的时候，会发现一个比较奇怪的想象，我的类名为wrap的父级div里面明明放了那么那么多的块，怎么我的高度变成了0了，这到底是怎么一回事啊？继续看下去就明白啦~~~
父级高度为0的效果如下：
二、浮动之后发生的那些事
浮动会导致当前元素脱离文档流，此时会对父级产生影响；
子元素浮动，父级元素会出现高度为0的现象，这个现象叫做高度塌陷；即是上图所看到的父级高度为0的效果。
我们说这时候可以为父级标签添加固定高度，但是在实际开发当中我们希望内容能够撑开高度。对于不浮动的元素来说，它们是能够撑开外部div的高度的，但是一旦浮动，也就意味着元素脱离文档流，父级div就相当于没有了内容。这时是没有办法实现内容撑开高度的。此时我们需要进行清除浮动对布局造成的一系列影响，简称：清浮动。所以接下来我们主要讲解的就是清浮动的几种方法以及各方法的优缺点了。
三、 清浮动的语法
我们要讲解清浮动，那必然要先看看清浮动的语法到底是怎么写的。
清浮动的基本语法：
clear: left | right | both | none | inherit;代码解释：
left：在左侧不允许浮动元素。
right：在右侧不允许浮动元素。
both：在左右两侧均不允许浮动元素。
none：默认值。允许浮动元素出现在两侧。
inherit：规定应该从父元素继承 clear 属性的值。
四、 清浮动操作
了解了主要的清浮动语法之后，我们主要要来看看清浮动的方法具体有哪些，都是怎么去书写的。
今天我们主要讲解的清浮动方法有：空标签清浮动、br标签清浮动、父级div设置overflow属性、父级元素设置浮动、after伪元素清浮动。接下我们就一起来把这些方法一个个的掰扯清楚来吧。
1 空标签清浮动
所谓的空标签清浮动就是使用一个空的没有存放任何内容的标签来书写清浮动的语句，具体代码如下：
<style>
.main div {
float: left;
width: 200px;
height: 200px;
margin-right: 20px;
background: #fcf;
}
.footer {
width: 420px;
height: 100px;
background: red;
}
.clear {
clear: both;
/*消除默认行高的影响*/
height: 0;
}
</style>
<div class="wrap">
<div class="main">
<div>梦幻雪冰</div>
<div>独行冰海</div>
<p class="clear"></p>
</div>
<div class="footer"></div>
</div>代码解释：
clear：both是清除浮动的方法，height:0防止默认高度影响。
优点：通俗易懂，容易掌握。
缺点：会添加大量无语义空标签，结构与表现未分离，不利于维护。
使用：在浮动元素末尾加一个任意空标签，空标签设置clear:both和height:0;
2 br标签清浮动
借助单标签br来实现清浮动，具体代码书写如下：
<style>
.main div {
float: left;
width: 200px;
height: 200px;
margin-right: 20px;
background: #fcf;
}
.footer {
width: 420px;
height: 100px;
background: red;
}
</style>
<div class="wrap">
<div class="main">
<div>HTML5学堂</div>
<div>H5Course</div>
<!-- br标签自带的属性 -->
<br clear="all" />
</div>
<div class="footer"></div>
</div>代码解释：
优点：比空标签方式语义稍强，代码量少。
缺点：结构与表现未分离，不推荐。
使用：br标签清除浮动类似空标签清浮动，同样在float元素后面加一个br标签，只不过br存在一个属性clear只要将br标签里的clear属性设置成all即可。如: clear="all"。
3 父元素设置overflow：hidden/auto
给父级div设置overflow，书写hidden或者auto属性值即可用于清浮动操作，代码如下：
<style>
.main {
overflow: auto / hidden;
}
.main div {
float: left;
width: 200px;
height: 200px;
margin-right: 20px;
background: #fcf;
}
.footer {
width: 420px;
height: 100px;
background: red;
}
</style>
<div class="wrap">
<div class="main">
<div>HTML5学堂</div>
<div>H5Course</div>
</div>
<div class="footer"></div>
</div>代码解释：
优点：语义化没问题，同时代码量少。
缺点：内容多的时候，会被隐藏，无法显示需要溢出的元素。
使用：在父级设置一个overflow：hidden即可。注意一点，不是所有设置overflow：hidden都能清除浮动。
4 父元素设置浮动
当内部子元素浮动之后，给父级元素也设置浮动来实现清浮动，具体代码如下：
<style>
.main {
float: left;
}
.main div {
float: left;
width: 200px;
height: 200px;
margin-right: 20px;
background: #fcf;
}
.footer {
width: 420px;
height: 100px;
background: red;
}
</style>
<div class="wrap">
<div class="main">
<div>HTML5学堂</div>
<div>H5Course</div>
</div>
<div class="footer"></div>
</div>代码解释：
优点：语义化没问题，同时代码量少。
缺点：父元素的相邻元素布局受影响——继续设置浮动操作，直到body为止。
使用：浮动元素的父级也设置浮动，只不过会影响其他的布局。
5 after伪元素清浮动
借助伪元素来实现清浮动操作，当前开发中用的最多的存在，具体代码如下：
<style>
.main div {
float: left;
width: 200px;
height: 200px;
margin-right: 20px;
background: #fcf;
}
.footer {
width: 420px;
height: 100px;
background: red;
}
.clearfix:after {
clear:both;
display:block;
height:0;
content:"\200B";
}
.clearfix {
*zoom:1;
}
</style>
<div class="wrap">
<div class="main clearfix">
<div>HTML5学堂</div>
<div>H5Course</div>
</div>
<div class="footer"></div>
</div>代码解释：
优点：语义化和结构都没问题。
缺点：复用方式不当，会造成代码量增加。
兼容：由于IE6-7不支持after，使用zoom:1 触发hasLayout。
核心代码:
.clearfix:after {
content:"\200B";
display:block;
height:0;
clear:both;
}
.clearfix {
*zoom:1;
}原理解释：
1) display: block; 使伪元素的展示特性以块级元素显示，它默认的展示特性是行元素的展示特性。
2) height: 0; 避免生成内容破坏原有布局的高度。
3) Unicode: 字符里有一个“零宽度空格”，也就是U+200B，这个字符本身是不可见的。
4) zoom: 1; 由于IE6-7不支持:after，使用zoom:1触发hasLayout。
我们今天对于清浮动操作的5种方法就是讲解到这里了，大家可以照着我们给出的代码例子去敲一敲代码，看一下自己敲的效果，即能够明白这些方法的使用了。
五、课堂案例讲解
学完今天讲解完的清浮动的5种方法之后，大家一起来实现一个布局练习吧，小编这里主要就使用父级元素这种方法来操作了，感兴趣的可以把每一种方法都用一用。一起来看看这个案例吧。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>父级浮动</title>
<link rel="stylesheet" href="reset.css">
<style>
/*一级布局*/
.wrap {
width: 540px;
height: 540px;
margin: 0 auto;
}
.div1,.div2 {
width: 540px;
height: 270px;
}
/*二级布局*/
.sdiv1 {
float: left;
width: 135px;
height: 270px;
background: #008000;
}
.sdiv2 {
float: left;
width: 270px;
height: 270px;
}
.sdiv3 {
float: left;
width: 135px;
height: 270px;
background: #808080;
}
.sdiv4 {
float: left;
width: 200px;
height: 270px;
background: #cdfffe;
}
.sdiv5 {
float: left;
width: 340px;
height: 270px;
background: #ffc0cb;
}
.box1 {
height: 135px;
background: #ffffcd;
}
.sbox1 {
float: left;
width: 135px;
height: 135px;
background: #0000ff;
}
.sbox2 {
float: left;
width: 135px;
height: 135px;
background: #ffc0cb;
}
</style>
</head>
<body>
<div class="wrap">
<div class="div1">
<div class="sdiv1"></div>
<div class="sdiv2">
<div class="box1">
<div class="sbox1"></div>
<div class="sbox2"></div>
</div>
<div class="box1"></div>
</div>
<div class="sdiv3"></div>
</div>
<div class="div2">
<div class="sdiv4"></div>
<div class="sdiv5"></div>
</div>
</div>
</body>
</html>代码的展示效果：
六、课后作业
根据今天所学的知识点，罗列出清浮动的几种方法。
并用自己的语言，尽可能完整的描述出“浮动与清浮动”（建议整理好语言逻辑，要说什么，先说什么，再说什么~~~）。