Question

div+css如何布局方块，如图，求一份简单明了的教程来总结display,float,position,clear的用法。

div+css如何布局方块，如图，求一份简单明了的教程来总结display,float,position,clear的用法。

上图是我在vs中显示正常的图
下图是在浏览器中显示的超难看的图





Answer 1

可以教你一个不算最好，但是最简单的办法，首先你既然已经确认了布局，但是不知道怎么用css写出来，那么你可以想想一下这就是一些框，小框只能放进大框里面。那么整个布局最外面的是一个无颜色的大框<div style="width: 200px; height: 300px;">.....</div>而在这个大框里面又有6个100x100的小框<div style="width: 100px; height: 100px">.....</div>以此类推，先做好外层的大框，然后在里面放进小框，你只要计算好每个框的大小就能够很轻松的弄出扮衫友你想要的布局。至于中间的间距我想应该很轻松吧。用的是div的话display一般是用不到的，div用到display一般是用来隐藏或者显示。而position对与你当前的布局也用不到，那是用来定位用的，可以理解为让div脱离其他布局的影响独立出来，所以可能会盖住你原来的布局。float是用在同一层级的排版，比如最外面大框框住的六个小框属于同一层级，但是不同框里面的div是不属于同一层级的，只有同一div里面的同层级div才会在float的影响下对齐排列。所以其实你按照我上面说的计算好宽高的话，float也是可以用不到的。clear也是可厅槐以不用。相信你多写一些css以后会理解这些塌仔东西的用法的。
<div style="width: 200px; height: 300px;">
<div style="width: 98px; height: 98px; margin-bottom: 2px; margin-right: 2px; background:red;"></div>
<div style="width: 98px; height: 98px; margin-bottom: 2px; margin-right: 2px;">
<div style="width: 48px; height: 48px; margin-right: 1px; margin-bottom: 1px; background:yellow;"></div>
<div style="width: 48px; height: 48px; margin-right: 1px; margin-bottom: 1px; background:yellow;"></div>
<div style="width: 48px; height: 48px; margin-right: 1px; margin-bottom: 1px; background:yellow;"></div>

<div style="width: 48px; height: 48px; margin-right: 1px; margin-bottom: 1px ; background:yellow;"></div>
</div>
<div style="width: 98px; height: 98px; margin-bottom: 2px; margin-right: 2px;background:orange;"></div>
<div style="width: 98px; height: 98px; margin-bottom: 2px; margin-right: 2px; background:green;"></div>
<div style="width: 98px; height: 98px; margin-bottom: 2px; margin-right: 2px;">
....
</div>
<div style="width: 98px; height: 98px; margin-bottom: 2px; margin-right: 2px;">
....
</div>
</div>

追问

非常感谢你的回答！我想请教下
我想让第一个方块下面的那几个小方块放在第一个方块的右边，用这4个方块堆成一个大方块放在第一个大方块的右边，是不是要用float?

追答

没懂你什么意思哦

追问

就是要是布局个这样的应该怎么写？ 

追答

这个确实要用到float，一开始我记错了，默认div是从上到下排列的。而float可以指定这个排列方式，一般情况下你可以给需要进行左右排列的div都加上float。left就是从左到右排，right就是从右到左排，默认是从上到下。具有同一种float属性的（都是left或者right）的div会按顺序对齐排列，不同float属性的div不会按顺序排列。
所以我前面给你的代码给div都加上float：left的话就能达到你要的效果了。
需要左右排列的就加float：left；上下排列的就不用。另外就算是float：left只要一排的长度超过了外框宽度就会自动换到下一行。
一般情况下，同一层级下的div要么就都加float，要么就都别加。不然如果宽高设置不好可能会有重叠的现象。

Answer 2

啊？