哈哈哈，这是我来掘金社区发的第一篇文章。今天在写一个布局时脑洞大开，心想：如果第一个div的两个子div都设置了浮动，并且子div的高度大于父div，那麽对于后面盒子内容的布局会有什么影响呐？
带着这个疑问，我就开始了VS大法。先上代码：
<div class="a">
<div class="a_left">1号浮动子盒子</div>
<div class="a_right">2号浮动子盒子</div>
</div>
<div class="b">b盒子</div>
再来看下css代码：
.a {
height: 200px;
background-color: cornflowerblue;
}
.a_left {
float: left;
width: 700px;
height: 180px;
background-color: red;
}
.a_right {
float: left;
width: 1000px;
height: 180px;
background-color: blue;
}
.b {
width: 20%;
height: 200px;
background-color: seagreen;
}
效果如下：此时两个浮动盒子并没有溢出，b盒子布局正常。
当把a与b盒子高度设置超过父盒子时，效果如下：
我这里给连个子盒子设置了半透明，方便观察，可以看到b盒子的位置没有变化，但是文字位置却被左侧浮动的盒子推了下来，假如溢出部分覆盖b盒子的话。。。。。就发生了如下场景：
呜呜呜，浮动盒子好无情，竟然把文字推到b盒子外部。。。
看到这里我们思考一个问题，假如只是右侧浮动的盒子高度变化，左侧不变，会把文字推出来吗？看效果：
啊无情！！！！为什么这样对一个无辜的小文字。看来无论哪个盒子的高度变化，b盒子的内容都会被推走啊。
看完了以上情形，我们再来分析下如果b盒子的宽度变化会不会对文字内容有影响呐？我们假设初始情形如下：
当我给b盒子的宽度设置小于左侧一号浮动盒子时：
可以看到文字位置没变，当b盒子宽度大于1号盒子小于2号浮动盒子时吶？
我们惊喜的发现竟然文字位置上去了，就像挤在了两个盒子之间，依此类推，当我们设置宽度大于两个浮动盒子时，效果如下：
果不其然，文字又上了一个台阶，就跟爬楼梯一样，环绕在浮动盒子的周围，这也就照应了浮动设置的初衷是为了解决文字环绕问题吧！！！
嘿嘿，本人现在研一，打算毕业后从事前端开发的工作，别人都说研究生搞前端浪费学历,让我搞人工智能。但是有句话说得好，兴趣是最大的老师，我对前端有着浓厚的兴趣，我觉得按着自己的本心，向着光亮那方，是不会有问题的。以后我也会多发文章来记录自己前端学习的点点滴滴，加油ing！！！
