首页手记 CSS之Float奥秘刨根问底

CSS之Float奥秘刨根问底

标签：

Html/CSS CSS3

今天在写网页的过程中无意发现了一个问题，于是花了数小时来研究，原来看似简单的“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所在的容器（红色边框）却在上面，文字与容器分离：