CSS浮动——CSS实验室

为了测试CSS浮动属性，我们需要一个作为容器的div。点击后面的按钮将容器div的背景设置为粉色。

在这个div的里面再嵌套一个div。点击后面的按钮将内层div的背景色设置为黄色，并且将其宽度设置为300像素。

最后，再添加一个并列的内部div，将它的背景设置为蓝色，同样设置为300像素宽。

代码结构如下：

<div id="d">
 <div id="d2">
……
 </div>
 <div id="d3">
……
 </div>
</div>

我们可以观察到，由于div是块级元素，尽管容器div里有足够的空间让两个内部并列div显示到一行，第二个内部div仍然是自动换行后显示。怎么可以让div“见缝插针”呢？下面就让我们来看看CSS的浮动属性。

CSS浮动，float

float是CSS中非常重要和常用的一个属性，这里我们就通过实验来看看float属性的作用。我们首先给第一个内部div设置一个float:left的属性。

#d2{ float:left}

注意，此时原来在两个内部div中间的空隙已经不见了。下面我们再来让第二个内部div同样向左侧浮动。不过需要注意，如果容器div内的所有元素都浮动的话，会造成容器div所占有的面积变化，页面内的文字可能会很乱，做好心理准备。重新刷新即可回复正常。

#d3{ float:left}

可以看到，当内部div2也想做浮动之后，它发现容器div内第一行尚有足够的宽度，便会尽量地靠过去。这就是float的作用。

float同样可以取值“right”，表示向右浮动，而取值“none”则表示不浮动。

试着让内部div2向右侧浮动。看看会有什么效果？