继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

CSS之Float奥秘刨根问底

妙玲儿
关注TA
已关注
手记 1
粉丝 5
获赞 15

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

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

问题如下:

  <style>
        *{ margin: 0px 0px;padding: 0px 0px}

        a{
            position: absolute;
            line-height: 100px;
            padding-left:50px;
        }
        li{
            display: inline;
            float: left;
            border:1px solid blue;
            width:100px;
            height:100px;
        }
        div{
            height: 50px;
            width: 50px;
            border: 1px solid red;
        }
    </style>
<body>
  <ul>
         <li><a href="#">a1</a></li>
         <li><a href="#">a2</a></li>
         <li><a href="#">a3</a></li>
  </ul>
  <div>d1</div>
</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同时添加以上两个属性:

图片描述

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

打开App,阅读手记
2人推荐
发表评论
随时随地看视频慕课网APP