最近文章

最近文章
您当前所在位置:主页 > 最近文章 >

【正视CSS 08】巅峰对武之float你为什么要坍塌我的元素!!!

发布日期:2019年01月04 编辑:

前言

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

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

各位周末结束后都累了吧,那我们一起来看看【寒冬】的面试题吧(据说阿里的哟)

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

近期状况

我CSS的名师是:张鑫旭(自认入门的)

最近引导者:寒冬

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

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

引出问题

我最近一直在思考float实现的原理。
我最开始根据各种学习后产生了一个认识,float破坏了行内框inline boxes
从而导致块级元素坍塌,因为块级元素的高是line-height撑起来的,而line-height又来源于line boxes。
但是最近学习了BFC后,知道float触发了bfc,导致其独立了出来,所以元素被包裹了,这也是overflow清楚浮动的原理。
那么float到底做了些什么事情呢???

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

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

clear:none=>闭合浮动

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



所以我们这里为他取名闭合浮动较为合理。而且他也解释了为什么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元素,通俗点说:



overflow闭合浮动的真相便是:

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

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

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

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

真相到此为止?

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

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

意外之喜

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

对的,你没有看错,我要说的就是inline-block!

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

 
 
     
     
  
  
     
 
 
     叶小钗 叶小钗 叶小钗
 
 

以上是标准浏览器,我们来看看我们的IE7:

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

其中中间那个家伙的底边没有了,大家知道是为什么的(layout)。

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

 
 
     
     
 
  
     
 
 
     
         叶小钗
     
         叶小钗
     
         叶小钗
 
 

我们来看看IE7的表现:

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

 
 
     
     
   
  
     
 
 
     
         叶小钗
     
         叶小钗
     
         叶小钗
 
 

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

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

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

这是因为默认情况下inline元素之间就有间隔(IE7不会有间隔)!

 
 
     
     
   
     
 
 
     
         叶小钗
     
         叶小钗
     
         叶小钗
 
 


 

IE7



 

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

 {
 :;
 :;
 }
 {
 :;
 :;
 :;
 :;
 }
 {
 
  :;
     }
  {
 :;
 :;
 :;
 }
结语

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

http://www.bkjia.com/HTML_CSS/441201.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML_CSS/441201.htmlTechArticle前言 事情还要回答一个月前,当时寒冬老师搞了一道position的面试题,我当时有幸给看到了,而且正是我要去外地的那天。 于是我那天上午...

本文源自: 凯发国际