上一章的方法我不喜欢，那就得有其他方法来解决这个问题，这就是浮动。浮动被用的超多的，虽然现在对于排版问题已经有了新的方式，但是浮动也并没有完全退出，尤其在你希望兼容低版本浏览器的时候。
很简单，给元素加上浮动，它就可以横排了。
准确点说，差不多就是盒元素不再默认 100% 的宽度了，也不强制独占一行了。
<div class="box-float-left">第一</div><div class="box-float-left">第二</div><div class="box-float-left">第三</div><div class="box-float-left">第四</div>.box-float-left {float: left;border: 3px solid orange;padding: 10px;}第一第二第三第四
多好，多完美~还可以往右浮动：
<div class="box-float-right">第一</div><div class="box-float-right">第二</div><div class="box-float-right">第三</div><div class="box-float-right">第四</div>.box-float-right {float: right;border: 3px solid orange;padding: 10px;}第一第二第三第四
注意顺序哦~
到现在，一切都很美好。但是真的如此么？我们来讲讲浮动。
还记得我们说文档流的时候讲的排队么？块元素就好像一个团体过来占用场地。我们又说这个块元素是个盒子。
那块元素里有块元素就如同盒子里套盒子，但是我们能看见它们里面的东西，说明什么，这些盒子没有盖。就好像……那种一个大盒子里面套了好多小盒子的收纳盒，我找不到合适的图了，还怕侵权，等哪天我自己折一个吧。
但是浮动啊，什么是浮动，就是飘起来了。
假设父元素不变，子元素全部浮动。什么情况？大盒子没动，里面的小盒子全飘出来了。好像也没什么……但是，你现在的想象是建立在大盒子有一个基本形状的基础上，如果大盒子没有被指定宽高的话，当然宽度还是默认的 100%，问题不大。但是高度……
你就想象大盒子是有弹性的，里面撑着它的东西飞了出去，结果会怎样？当然是收缩了。所以大盒子收缩了。
后面排着的元素呢？只要没飞起来的，就看不到那些浮动元素，那就傻芙芙的跟着大盒子往前跑了。
我们呢，正在以上帝视角俯视这些盒子，结果就会是……
<div class="big-box">无辜收缩的大盒子<div class="box-float-left">第一</div><div class="box-float-left">第二</div><div class="box-float-left">第三</div><div class="box-float-left">第四</div></div><div class="box-kown-nothing">后面的盒子傻芙芙跟着跑</div>.big-box {border: 3px solid blue;padding: 10px;}.box-float-left {float: left;border: 3px solid orange;padding: 10px;}.box-kown-nothing {border: 3px solid green;padding: 10px;}无辜收缩的大盒子第一第二第三第四后面的盒子傻芙芙跟着跑
这样一下子产生了好多问题。我们一个个说：
首先说盒子们，大家忘记了上面浮动的元素可不好。所以，我们要遵守一个原则：
如果浮动，则一直浮动，每一个元素都浮动，都飘起来不就相互看得见了。子元素飘起来了，父元素也飘起来了，所有元素都飘起来了，这和没飘起来是一样的。
但是，我们不能一整页元素全都浮动啊。如果要终止浮动，必须清除。差不多就是不用了记得收起来的意思。你看我们浮动元素，它本身的位置是正确的，对前面的元素没有影响，问题都出在后面，因为后面的人看不到天上的它们。那如果我在浮动元素的最后，立一根顶天立地的标记，不就不会发生这种误会了么？那么清除浮动就是这么一种作用。
怎么清除浮动呢？在浮动的最后再加上一个块元素，并设置它的 CSS clear: both;。就是清除这个元素的浮动，不再跟着前面飞啦，both 说的是左右都清除。（这东西怕是也就我还解释一下，简直都成了固定格式了）。一般这个元素我们也不放内容了，就是一个空元素，专门干这个。
<div class="big-box">无辜收缩的大盒子<div class="box-float-left">第一</div><div class="box-float-left">第二</div><div class="box-float-left">第三</div><div class="box-float-left">第四</div><div style="clear: both"></div></div><div class="box-kown-nothing">后面的盒子傻芙芙跟着跑</div>.big-box {border: 3px solid blue;padding: 10px;}.box-float-left {float: left;border: 3px solid orange;padding: 10px;}.box-kown-nothing {border: 3px solid green;padding: 10px;}无辜收缩的大盒子第一第二第三第四后面的盒子傻芙芙跟着跑
注意它的位置，是在最后一个浮动元素的后面，紧挨着。
清除浮动的方法还有很多，不过现在先学一个，用着，理解了再考虑其他的。
然后，注意大盒子里面的文字，始终坚定不移的被浮动元素影响着。这个就厉害了，大家都看不见浮动元素的时候，就它们看得见，嘿！你把它们理解为瘦高个儿就好，超级高，大概是别人的两三倍吧。你想，浮动元素飞起来一人多高，别人都看不见它了。正在空中美呢，一回头，和行内元素来个脸对脸，差点亲上，好尴尬。
最后，浮动居然可以浮动到行内元素的前面，如果我在段落里浮动图片的话……诶呀，这一章字太多了，那就作为你们的课后练习自己试验一下吧~
暂无评论内容