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

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

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

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

你好！ 啊？ 如有疑问，请追问。