浮动元素

网页设计人员对于浮动元素有几点要记住。首先，会以某种方式将浮动元素从文档的正常流中删除，不过它还是会影响布局。采用网站建设css的特有方式，浮动元素几乎“自成一派”，不过它们还是对文档的其余部分有影响。

这种影响源自于这样一个事实：一个元素浮动时，其他内容会“环绕”该元素。对于浮动图像来说，这种行为我们已经很熟悉了，不过要知道，元素浮动时也同样如此（例如，浮动一个段落在图10-2中，由于为浮动段落增加了外边距，可以很清楚地看到这种行为：

p.aside {float: right; width: 15em; margin: 0 1em 1em; padding: 0.25em; border: 1px solid;}

可以注意到一些有意思的情况，首先，网页设计中浮动元素周围的外边距不会合并。如果浮动一个有20像素外边距的图像，在这个图像周围将至少有20像素的空间。如果其他元素与此图像相邻（这表示水平相邻和垂直相邻），而且这些元素也有外边距，那么这些外边距不会与浮动图像的外边距合并，如图10-3所示：

p img {float: left; margin: 25px;}

第7章做过一个比喻，将元素比作是有塑料边的纸片，再来看这个比喻，图像周围的塑料边（外边距）绝对不会与其他浮动元素周围的塑料边重叠。

如果确实要浮动一个非替换元素，则必须为该元素声明一个width。否则，根据网站建设CSS规范，元素的宽度趋于0。因此，假设浏览器的最小width值是1个字符，那么浮动段落可能只有1个字符宽。如果没有为浮动元素声明width值，最后可能得到如图10-4所示的结果（坦率地说，这种情况很少见，但确实是可能的）。

图10-4：没有显式宽度的浮动文本不浮动

不浮动

除了left和right外，float属性还有一个值，float: none用于防止元素浮动，

这看上去可能有些傻，因为要让一个元素不浮动，最容易的办法就是不声明float，这样不就行了吗？确实如此。首先，float的默认值是none。换句话说，要得到正常的非浮动行为，必须有这个值，如果没有这个none值，所有元素都会以某种方式浮动。

其次，网站建设人员可能想覆盖导入样式表中的某个样式。假设设计人员在使用一个服务器端样式表，这个样式表要让图像浮动。不过在某个特定的页面上，设计人员不希望图像浮动。不必为此再编写一个全新的样式表，而只需在文档的嵌套样式表中增加img {float: none;}，不过，除了这种情况，确实很少有必要真正使用float: none.