“小白啊！今天来的这么早？”
“恩，昨天看了纵布局以后，今天已经着急学横布局怎么实现了，这两个布局会做了，我是不是就可以做任意的网页布局了？”
“普通的页面布局肯定一点问题没有，改天我再跟你探讨一些关于css的position的问题，今天我们还是说横布局吧！”
老朱接着说道：“小白，你知道为啥叫div容器么？”
“不知道！为什么呢？”
“最简单的原因就是它的里面可以放东西！另外它还可大、可小、可自由变形还可固定不变，昨天咱俩谈布局的时候说到了块容器前后默认是有换行符的，可是有时候我们希望两个块容器在一行，这怎么办？总部能用table来做吧！”
“你可以想象一下，有一个盒子他的里面可以放很多的东西，假如现在给你拿来宽度是这个盒子内径一半的小盒，让你放到大盒子里面并且尽可能不要浪费盒子的空间，你会怎么放？”
小白说道：“我肯定会沿着盒子的左上角或者右上角一个一个紧挨着往里面放。”
“那如果小盒子宽度是大盒子的三分之一呢？是不是也是一样的放法？”
“恩，是的！”
老朱说：“在css样式里面，有一个float属性，它可以给容器靠左或者靠右的趋势。跟你摆放盒子的放法一样，如果float设置成left，容器就会沿着父容器的左上角一个挨着一个排列，当第一行剩余的空间不足以放下一个容器的时候，这个容器就会换行，并且靠左寻找可以放他的位置。”
小白听到这里有点迷糊，问道：“如果有一个容器右侧实在放不下了，他是不是就从第二行的最左边开始排列了？”
“不是！你可以把每一个容器想象成一个铁盒子，在父容器的左侧有一块强力磁铁，如果右侧放不下一个铁盒，这个铁盒会往下移动，直到移动到可以放下它的时候就停止下移，这是左侧还有磁铁对它的吸力，所以它还得继续左移，直到有其他铁盒卡住它为止。是不是有点晕了！我给你放个例子你看一下就明白了！”
“这里的四个容器float都是left，你可以看到，根据mainContainer里面子容器的顺序先放b21，然后放b31，因为当前空余一半的位置，所以b31轻松靠在了b21的右边，第三个要放的是b41，由于b21的宽度加b31的宽度为1/2+1/3，剩余的位置不足以放置b41，所以b41会往下走，当它下移超过b31高度以后剩余的空间可以放它，因此它继续向右靠直到被b21卡住为止。”
“小白，我举的这个例子是特例，在实际使用的时候，我们的子容器宽度没这么乱，一般子容器的宽度、高度都一样。所以排列出来都是很规整的。”
“今天我们讨论float属性的时候，容器的margin、padding、border的值都是默认为0的，如果子容器的这三个属性有值，在占位的时候还得考虑把这些值加上，你一会儿做练习的时候尝试把这些值加上进行测试。哦～还有件事，我给你其中一个子容器的css代码做个参考。不要忘了练习的时候把float为right的情况也练习练习哦～”
想学H5的朋友可以关注老炉，您的关注是我持续更新《小白H5成长之路》的动力！
网友评论