1.div内多个块元素的浮动关系：
假设一个大的div bigBox 中有三个块级盒子 div1 div2 div3
<div class="bigBox">
<div class="div1">第一个盒子</div>
<div class="div2">第二个盒子</div>
<div class="div3">第三个盒子</div>
</div>
它们的样式为：
.bigBox{
500px;
border: 1px solid #000;
}
.div1{
background-color: yellow;
/*float: left;*/
100px;
height: 100px;
}
.div2{
background-color: blue;
120px;
height: 120px;
}
.div3{
background-color: red;
140px;
height: 140px;
}
由于块级元素会单独占用一行，并且父元素会自动被撑开，可以得到：
现在，先让div2 浮动起来：给div2 加一个浮动
.div2{
background-color: blue;
120px;
height: 120px;
float: left;
}
这时，可以看到：
div3 跑到了原来div2 所在的位置，同时div3中的文字会环绕div2，我们通过给div3多加几个字使这个效果更加明显：
<div class="div3">第三个盒子多加几个字</div>
这时：
总结：当div内存在多个块级元素，如果其中一个块级元素发生了浮动，相对于紧跟在它后面的块级元素，这个元素脱离了普通流。后面的元素会占用浮动元素的位置，就像这个浮动元素不存在一样；
但后面紧跟的这个元素中的文本会环绕在浮动元素的右、下方。
如果让div1向左浮动， div2向右浮动，会是什么效果？
发现相对于浮动元素后面的元素，浮动元素脱离了普通流，后面的元素会占用脱离普通流的浮动元素的位置。
总结：多个元素浮动时，浮动元素会脱离普通流，后面的块级元素会补充它们的位置。
如果块级元素内的所有块级元素div1 div2 div3都发生了左浮动:
浮动元素都脱离了普通流，这时外部父元素以为内部没有元素，看起来就像是一条线段。
如果这时候，想让父元素看起来像正常包裹浮动元素那样，就需要使用清除浮动技术。
2.清除浮动的几种方法：
a. 最直接的方式就是给浮动元素的父元素指定高度。
在上例中，既然三个内部块级元素都发生了浮动，给父元素设置一个高度：
.bigBox{
500px;
height:150px;
border: 1px solid #000;
}
b.让浮动元素的父元素也跟着浮动
不考虑元素浮动对外部整体布局的影响，可以让浮动元素的父元素也发生浮动，来达到清除浮动的影响。
.bigBox{
500px;
border: 1px solid #000;
float: left;
}
这种做法的原理可以理解为：浮动元素都已经脱离了普通流，但它们都又处于另一种相同的流中，它们之间的关系就表现为父级浮动元素还是包裹这子浮动元素。
c. 在所有浮动子元素的后面添加一个空的块级元素，并设置空的块级元素样式为clear:both;来清除浮动。
假设这个时候html文档结构是这样的
<div class="bigBox">
<div class="div1">第一个盒子</div>
<div class="div2">第二个盒子</div>
<div class="div3">第三个盒子多加几个字</div>
<div class="div4"><!-- 空盒子 --></div>
</div>
样式如下：
.bigBox{
500px;
border: 1px solid #000;
}
.div1{
background-color: yellow;
float: left;
100px;
height: 100px;
}
.div2{
background-color: blue;
120px;
height: 120px;
float: left;
}
.div3{
background-color: red;
140px;
height: 140px;
float: left;
}
再设置这个后加入的空的块级元素的样式为：
.div4{
clear:both;
}
就能有效的清除浮动：
下面来让我看看clear：both清除浮动的原理。
首先来看一个栗子:
<div class="bigBox">
<div class="div1">第一个盒子</div>
<div class="div2">第二个盒子</div>
<div class="div3">第三个盒子多加几个字</div>
</div>
.bigBox{
500px;
border: 1px solid #000;
}
.div1{
background-color: yellow;
100px;
height: 100px;
}
.div2{
background-color: blue;
120px;
height: 120px;
float: right;
}
.div3{
background-color: red;
140px;
height: 140px;
clear:both
}
其余的元素都不浮动，只让div2像右浮动，在div3上使用clear:both 清除浮动。
可以看到在第三个div上利用clear:both清除浮动后，应该是触发了一种机制：它会计算出当前浮动元素的位置，并当作浮动元素在现在的位置是普通流位置。
由上面的栗子，当所有块级子元素都在浮动时，在这些浮动元素的后面加一个空的div设置样式为clear:both;后会认为这些浮动元素现在待的位置是普通流位置，空div只能呆在这些元素后面。这样就会将父级块级元素撑开。起到清除浮动的效果。
d. 在父元素上设置overflow:hidden;来清除浮动
原理：overflow:hidden；本身的是用来隐藏溢出的，之所有能够起到清除浮动，是因为我们默认没有给浮动元素的父元素设置高度，这时父级块元素的默认高度为：height:auto;当我们给父元素添加overflow:hidden；后，首先要计算父元素的高度才能确定怎么隐藏溢出，但由于设置了overflow:hidden而触发了BFC，使得height:auto的值包含了内部浮动元素的height；这时隐藏溢出就不会将浮动元素隐藏掉，而是正好将其包裹在里面。从而起到清除浮动的作用。
.bigBox{
500px;
border: 1px solid #000;
overflow: hidden;
}
e. 利用给父元素添加自定义的伪类，清除浮动
这种方法本质上讲，于在子元素末尾添加空的块级元素并设置其clear:both;是一个道理。
.bigBox{
500px;
border: 1px solid #000;
}
.bigBox:after {
clear: both;
display: block;
visibility: hidden;
height: 0;
line-height: 0;
content: "";
}
