前言

事情还要回答一个月前，当时寒冬老师搞了一道position的面试题，我当时有幸给看到了，而且正是我要去外地的那天。

于是我那天上午便开始入魔了，写完了博客才急急忙忙上飞机：

当时只是草草的回答了那道题，却没想到今天会再拿出来说事！对的，我还是搞不懂为什么float会导致元素坍塌！！！！

近期状况

我CSS的名师是：张鑫旭（自认入门的）

最近引导者：寒冬

我CSS方面的东西除了之前的积累，基本来源于此两人，各位可以关注下。

多数知识来源于张鑫旭，寒冬让我把整个知识串了起来，虽然素不相识，在此谢过了。

引出问题

我最近一直在思考float实现的原理。

我最开始根据各种学习后产生了一个认识，float破坏了行内框inline boxes

从而导致块级元素坍塌，因为块级元素的高是line-height撑起来的，而line-height又来源于line boxes。

但是最近学习了BFC后，知道float触发了bfc，导致其独立了出来，所以元素被包裹了，这也是overflow清楚浮动的原理。

那么float到底做了些什么事情呢？？？

虽然我昨天病了，这个问题却在脑中挥之不去，所以今天搞完js后，觉得还是有必要深究一下。

不研究就算了，一研究又发现一个高手，好像是前端观察，只不过我不认识罢了。。。我这里也不管他是谁了，开始今天的学习吧。

clear：none=>闭合浮动

关于这个问题，我其实也必将迷糊的，因为我在用自己形成的CSS世界观解释问题时候一说到清楚浮动就感觉奇怪！

clear对应属性：left, right, both, none按道理说clear: none才是清除浮动啦

所以我们这里为他取名闭合浮动较为合理。而且他也解释了为什么overflow可以导致坍陷消失。

haslayout与block formatting contexts

IE7以下特有的layout以及BFC再次光临了，我都不知道最近有多少次提到他了。

通过之前我们的学习（清除浮动的具体例子我这里就不管了），想要解决高度塌陷的问题无非两种方案：

① 在浮动元素末尾加上clear: both 属性，强制其闭合元素

② 设置overflow或者display: table属性触发BFC（这里寒冬老师有不同的认识，他认为对名词触发不合适），从而解决坍塌问题。

关于BFC（现在他换了个马甲叫做flow root），大家应该相对熟悉了。

我的理解是所有normal flow的元素皆处于同一BFC，float元素处于一个BFC，每个绝对定位单独一个BFC

PS：此处有误请提出来。

我们的BFC可以解决上外边距叠加，可以强制包含float元素，通俗点说：

BFC就是一个独立的盒子，里面的子元素不会再布局上影响外面元素，BFC依然属于普通流

overflow闭合浮动的真相便是：

父级元素拥有了新的BFC，具有BFC的块级元素可以包含浮动！

以上好像是官方定义了，再往下面挖就没意思了。

IE6/7中没有BFC这个概念，其自身实现的haslayout基本等同于BFC。

所以我们在IE6/7中闭合浮动时候要加上一句，zoom: 1的属性触发haslayout

真相到此为止？

以上就是追寻后得到的真相，虽然我还是不太满意，虽然我还有点迷迷糊糊但是暂时这样吧，在今后一段时间里面，我还会再回来回看这个问题。

届时，我希望自己能找到自己想要的答案。

意外之喜

此次找寻答案过程中虽然没有完全得到我想要的答案，却意外得到了其它东西，他的名字便是inline-block。

对的，你没有看错，我要说的就是inline-block！

其实我们还是很喜欢人云亦云的，比如说我就一直认为IE7之前没有inline-block这个属性，其实这是大错特错的！

1  2  3      4      8  9 10     叶小钗 叶小钗 叶小钗11 12 

以上是标准浏览器，我们来看看我们的IE7：

大家看到了，虽然中间那块有问题，但是我们的inline-block是没有问题的！！！

其中中间那个家伙的底边没有了，大家知道是为什么的（layout）。

以上是行内元素，我们来看看块级元素的表现。

1  2  3      4      8  9 10     
     
      11         叶小钗
     
12     
     
      13         叶小钗
     
14     
     
      15         叶小钗
     
16 17 

我们来看看IE7的表现：

这家伙直接没有理我啊！！！所以说，并不是inline-block没有，而只是对块级元素的支持有问题罢了，所以我们对于块级元素需要这么干：

1  2  3      4      8  9 10     
     
      11         叶小钗
     
12     
     
      13         叶小钗
     
14     
     
      15         叶小钗
     
16 17 

虽然他们之间的间隔却没有了，却达到了我们的目标。问题又来了：

inline-block为什么会有莫名的间隔？

注意看图的朋友应该看到了，inline-block元素在现代浏览器中有间隔，我搞了很久查询确实是有！

这是因为默认情况下inline元素之间就有间隔（IE7不会有间隔）！

1  2  3      4      7  8  9     
     
      10         叶小钗
     
11     
     
      12         叶小钗
     
13     
     
      14         叶小钗
     
15 16 

 

IE7

这个问题你抓破头发都不会知道原因！！！

因为块级元素搞成inline的时候，在编辑器中换号了，浏览器认为换行就是一个空格，所以将他们写到一起吧！囧

 

此处我不再纠结下去了，附上抄来的解决空隙的代码：

1 .dib-wrap { 2     font-size:0;/* 所有浏览器 */ 3     *word-spacing:-1px;/* IE6、7 */ 4 } 5 .dib-wrap .dib{ 6     font-size: 12px; 7     letter-spacing: normal; 8     word-spacing: normal; 9     vertical-align:top;10 }11 @media screen and (-webkit-min-device-pixel-ratio:0){12 /* firefox 中 letter-spacing 会导致脱离普通流的元素水平位移 */13      .dib-wrap{14             letter-spacing:-5px;/* Safari 等不支持字体大小为 0 的浏览器, N 根据父级字体调节*/15     }16 }17 .dib {18     display: inline-block;19     *display:inline;20     *zoom:1;21 }

结语

咳咳，其实我病了。。。我养伤去了，刚刚求妹子顶就有个兄弟踩了我下，现在求兄弟顶好吧。。。。