今天在写网页的过程中无意发现了一个问题，于是花了数小时来研究，原来看似简单的“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同时添加以上两个属性：
第一次写手记，还望给位大牛们发现错误后及时改正我。谢谢。如有看不懂本文的同学，可以仔细看看我分享的链接，长辈们写的要精炼许多。