斗酒恣欢谑

Float属性是CSS布局中常用的一个属性，用于控制对象的布局方式，大部分的div布局基本上都是通过float的控制来实现布局。

float用于设置对象是否浮动显示，以及设置具体的浮动方式。有三个值：

float:none
表示对象不浮动。

float:left
对象将向左浮动，右侧的内容将流到当前对象的右侧。

float:right
对象将向左浮动，左侧的内容将流到当前对象的左侧。

left和right属性的意思，通俗的讲，就是当前这个“块”漂在当前行的左侧或右侧（相对其它内容）。

学习float的过程中，发现最大的一个用处，就是将所有的div块的float设置为left，再设置精确的宽度（width），可以在网页上使“对象”们依次排列，一行满了，后面的对象又将换行显示。实现这个的核心技术在与对宽度的合理控制。所以对这些div对象的宽度计算上要非常精确，值得一提的是，计算宽度要把对象的border值计算在内。

以我投放adsense代码时写的简单css布局为例，这是一个float简单的例子。

实现效果如下图:

模板该部分代码如下：

<div id="adright">此处是adsense 250*250 广告代码</div>

css设计是：

#adleft{
width:295px;
height:250px;
float:left;
}
#adright{
width:250px;
height:250px;
float:left;
}

related_post这个id的css略去。

我们可以看到，adleft和adright的float属性都是left，这两个对象会依次从左往右依次排列。由于两个对象的width分别为295px和250px，295+250=545，而嵌套它们的外部容器content正好为549px，所以后面的内容将会从另一行开始显示。

另外我还有一个疑问：
一个没有对象的div，即：

<div>内容</div>

能不能使接下去的对象另起一行再显示,而不是紧接在这个空div里面最后一个对象的后面？

学习笔记 css, design