查看: 3756|回复: 0

[HTML代码] CSS之Float奥秘刨根问底

发表于 2018-2-12 08:00:01

今天在写网页的过程中无意发现了一个问题,于是花了数小时来研究,原来看似简单的“float”背后隐藏着“不为人知”的小秘密。

关于float基础知识这里就带过,只给大家分享一下我今天遇到的问题。

问题如下:

  1. <style>
  2. *{ margin: 0px 0px;padding: 0px 0px}
  3. a{
  4. position: absolute;
  5. line-height: 100px;
  6. padding-left:50px;
  7. }
  8. li{
  9. display: inline;
  10. float: left;
  11. border:1px solid blue;
  12. width:100px;
  13. height:100px;
  14. }
  15. div{
  16. height: 50px;
  17. width: 50px;
  18. border: 1px solid red;
  19. }
  20. </style>
复制代码
  1. <body>
  2. <ul>
  3. <li><a href="#">a1</a></li>
  4. <li><a href="#">a2</a></li>
  5. <li><a href="#">a3</a></li>
  6. </ul>
  7. <div>d1</div>
  8. </body>
复制代码

在我以为实现如上代码应该出现的效果是,li浮动,不占据块空间,于是div上移,神奇的事情出现了!!
图片描述

为神马div中的内容跑出来了???

百思不得其姐,我开始上网查资料,突然发现“float”远比我想象的神奇。
这里给读者分享一篇文章:https://www.cnblogs.com/jjucap/p/5345945.html
读完这篇文章我在想,what??excuse me?什么是浮动框?什么是行框?

【划重点!非常重要!!!】

首先,这里要说一下float的来源,最初,float是用于文字环绕的。

其次,非常重要的一点就是:浮动元素不会占据相邻非浮动元素的块空间,但是它会占据非浮动元素内的行框空间!!!!

浮动元素不会占据相邻非浮动元素的块空间”这句话是什么意思?

我们知道元素浮动以后就会飘起来,也就是“飞上天”了,此时不占据块空间(地面空间),也就是我写的代码中,a1,a2,a3是飞起来的,所以后面的div(红色边框)会跑上来(div并没有浮动,它在地面上)。

“浮动元素会占据非浮动元素内的行框空间!”这句话...又是什么意思?!

所谓“行框”就,是所有行高当中的最大值构成的行内框。行内框的高度就是行高。如下图,“小仙女”所占据的行高最大。如图:
图片描述

呃。。。可能还是有点难理解。。。

这么比喻吧。我是一个人a(一段文字),被容器A包裹起来了,浮动之后,容器A飞上天了,但是容器A的影子还在地面上,容器A的影子里不允许被别人(文字)占用。但容器A的影子里允许有容器B。

那原本容器B中的文字b会去哪里呢?

①如果容器B的宽度小于容器A的宽度,则b会在容器A的影子之后,且不在同一行(b不一定会在容器B中,也不是一定不在容器B中,有可能容器B高度很大),也就是我们最开始看到的图片那样:a1、a2、a3所在的容器宽度大于d1所在的容器宽度,d1只能在后面显示,而d1所在的容器(红色边框)却在上面,文字与容器分离:

图片描述
图片描述

②如果容器B的宽度大于容器A的宽度,则b依旧在容器A的影子之后,但b会在容器B中。

图片描述

同样的,字母和数字有点不太正常。

仔细看这个图片,是不是有种文字环绕的效果呢?

这也就是当初设计float的初衷。

这里再安利一个文章,写的也比较好,还不懂的同学可以再仔细看看,仔细思考思考:http://blog.csdn.net/hedong37518585/article/details/6645884

那我们如何解决这个问题?

①clear:both;——给div单独添加该属性后有如下效果:

图片描述

②overfloat:hidden;——给div单独添加该属性后有如下效果:

图片描述

③给div同时添加以上两个属性:

图片描述

第一次写手记,还望给位大牛们发现错误后及时改正我。谢谢。如有看不懂本文的同学,可以仔细看看我分享的链接,长辈们写的要精炼许多。



回复

使用道具 举报