《精彩绝伦的CSS》——布局（三）遏制浮动

三、遏制浮动

若一个容器中的元素全部采用浮动，则该容器如果没有自适应包裹内容其高度就会为0。

如下：

div#container{

border: 2px dashed gray;

background-color: #9AC;

}

div.colum{

float: left;

width:28%;

padding: 0 1%;

margin: 0 1%;

}

容器container内包含三个浮动块colum，效果如下：

图片顶部的那条虚线就是container的边框，可看出这个container的高度只有0，而内部浮动栏都到外边了。

这时只要做个小改变，就能解决了。

1、通过溢出遏制浮动：overflow:auto;

给容器添加溢出：

div#container{

border: 2px dashed gray;

background-color: #9AC;

overflow:auto;

}

效果如下：

可以看出容易已经“自适应包裹”浮动的各栏了。

需要注意的是：overflow属性的auto值以为着浏览器可以在div#container上添加滚动条。这在实际操作中国不一定会出现，但还是要留意一下。

2、通过浮动遏制浮动

另外一个遏制浮动的方法就是浮动容器本身。

这种方法之所以会起作用是因为浮动本身就被定义为用来包裹任何浮动的后代元素的，他们也被定义为自适应内容的宽度，不多也不少。

但是，在这种情况下，这可能会变得很危险：浏览器自行决定div#container到底多宽多窄，而这个结果是不可预知的，因此我们只要给定div#container一个明确的宽度（width:100%）就好。

div#container{

border: 2px dashed gray;

background-color: #9AC;

float:left;

widthj:100%;

}

div.colum{float: left; width:28%; padding: 0 1%; margin: 0 1%;}

最后结果与上面方法相同。

需要注意的是，这种方法可能会使正常的文档流内容跟随到浮动元素后面的风险。为了规避这个风险，我们可能需要清除任何跟随在浮动元素后的元素：

div#footer{clear:left;}

或者利用相邻兄弟选择器：div#container + *{clear:left}