做为终结篇,居然是消灭它。。。css
好吧,仍是先开始吧。html
说道清除浮动,你们恐怕第一个想到的就是clear属性吧。该属性的官方说明以下:面试
属性名: clear
值: none | left | right | both | inherit
初始值: none
继承性: 无
应用对象:block-level元素
它指明了block-level box(看第21条)不但愿本身的 left/ right / both与前面的float box相毗邻。要注意的是,这里清除的是排在block-level box前面的float box,与后面的float box不相干啊。有疑惑的童鞋请翻翻这篇文章的上半部分。chrome
以上这些都是咱们经过代码调节能够直观看见的现象,实际背后有更深层的东西值得咱们去挖掘。编程
1. 条件浏览器
首先问个问题: 是否是只要clearence设为非none,就真的会发生浮动清除呢?bash
固然不是!测试
若是clearence设为非none, css可能会引入清除。决定是否引入还得看block-level box在没有设置clearence(或者说clearence为none)的状况下所处的位置。ui
假设block-level box的clearence设为left。如今重置它的clearence为none,看看它的上边框边缘是否高于它以前的任何向左浮动的float box的下边缘。若是高于,则引入清除。spa
2. 效果
看过前几篇浮动的文章的童鞋都知道,float box可能会与block-level box并排,产生“围绕现象”。那么清除浮动带来的效果就是 block-level box会流动到float box之下,若block-level box与其余box产生了margin重叠, 重叠现象也会消失。
对比一下,或许更清楚!
例一 无清除
<html>
<head>
<style type="text/css">
.parent{
width:500px;
height:auto;
margin:20px auto 0;
padding:10px;
line-height:30px;
font-family:"Times New Roman",Georgia,Serif;
border:solid 2px rgba(247, 79, 79, 0.56);
}
.float-child{
width:100px;
height:50px;
float:left;
margin-right:10px;
box-sizing:border-box;
background:rgba(247, 79, 79, 0.56);
}
.normal-child{
width:350px;
border:solid 1px rgba(247, 79, 79, 0.56);
margin-bottom:5px;
padding-left:5px;
}
.first-block{
margin-bottom:10px;
}
.second-block{
margin-top:20px;
}
</style>
</head>
<body>
<div class='parent'>
<div class='normal-child first-block'>first block-level box</div>
<div class='float-child'></div>
<div class='normal-child second-block'>second block-level box</div>
</div>
</body>
</html>
复制代码
float box看上去彻底就是一个土匪嘛,很霸道的挡住第二个block-level box!
另外,第一个block-level box与第二个block-level box也产生了margin重叠,看个像素图。
能够看到,第一个block-level box与第二个block-level box之间的距离取margin的最大值20px,它们的margin发生了重叠。
再去看看清除带来的变化。
例二 引入清除
在例一的基础上修改.second-block类,具体以下:
.second-block{
margin-top:20px;
clear:left;
}
复制代码
登登登~~~“清除”上场,效果杠杠滴!
第二个block-level box不只成功的摆脱了float 土匪,还与第一个block-level box划清了界限,margin没有重叠,互不干扰,清的很干净嘛!
由此,可看出清除就如同在block-level box的上方加了必定高度的空白,这会使得block-level box移动到float box之下,并阻止了margin重叠。
看到这,有木有童鞋对block-level box下移的计算过程感兴趣?虽然说在实际编程中没啥用处,可是能够在面试官面前装大神。。。。好吧,我接着讲了,不感兴趣的童鞋直接略过下节。
3. 清除公式
用过清除的都知道,block-level box虽然说会移动到float box下方,但也不是随意下移的,它每次都会保证border的上边缘与位置最低的被清除float box的下边缘齐平。这是如何作到的呢?计算出block-level box的上边缘与位置最低的被清除float box的下边缘齐平所须要的清除距离(设为C),而后将block-level box下移C。
距离又是怎么算出来的呢?这里有个清除公式。
假设在html文档里有以下几个元素:第一位是margin-bottom为M1的block B1,第二位是高度为H的float box,第三位是margin-top为M2的block B2。B1和B2均没有子box,也没有设置padding或border。另外,B2不为空,且clear为both。那么它们在浏览器上应该表现成酱紫:
由于要引入清除,那么第二个block box必须知足:上边框边缘高于它以前的任何向左浮动的float box的下边缘,也就是:
max(M1,M2) < M1 + H
看上文,咱们知道:清除须要保证B2的border的上边缘与位置最低的被清除float box的下边缘齐平,也就是:
F的下边缘 = B2的border的上边缘
M1 + H = M1 + C + M2 (注:M1和M2此时是不会重叠的)
C = M1 + H - M1 - M2
= H - M2
由此,咱们知道清除距离
C = H - M2
也许有爱思考的童鞋问道:若是float box有上下margin怎么办?
此时的C = (H + 上margin + 下margin) - M2。
为啥?哈哈,这是由于float box不会与任何box发生margin重叠,因此呢,在有上下margin时得加上margin。
是否是没啥鸟用,^ ^ ~~~
常看到某些博文写到,如何清除box内的浮动,清除浮动的N种方法,balabala......一大堆。实际上标准的清除浮动只能清除float box下面的第一个block-level box。
为何会想到要清除box内的浮动?我想大概是由于某个block box的子float box跑到该block box的外面去了,一些童鞋觉得是浮动搞得鬼。
其实这不彻底怪浮动。
每一个box的高度计算是要遵循必定的规则。overflow为visible,height为auto的block box在计算高度时会忽略子box中的float box的高度,由此形成float box的下边缘跑到block box以外。
还有相似清除浮动的N种方法,大部分是不明白这里面的规则而写的hack方法,这些奇怪的清除方式经常会产生一些不易察觉的bug,你们仍是少用为妙。知道背后的机制,再给出正确的解决办法,才是终极之道啊!
浮动终于终于终于写完了,真是大头啊,花了很多时间整理。接下来要去啃下一个大骨头了,byebye啦。
ps: 本文中的例子均是在chrome 49.0上测试。