作为一名网络开发人员,我经常会在另一个(父)div 中放置两个 float (子)div。实际上我整天都在这样做。
<style type="text/css">
#left {float:left;}
#right {float:right;}
</style>
<div id="parent">
<div id="left" class="child"> </div>
<div id="right" class="child"> </div>
</div>
如果没有额外的 css/html,这是行不通的,因为父级不会自动增长以适应 float 的子级。有两种流行的方法可以克服这个问题:
1) 添加overflow:hidden
到 parent 的CSS。
2) 添加第三个“清除”子 <br style="clear:both;" />
.
我知道关于这些事情还有其他一些类似的问题,但我的问题是:
Which method is better and why? What are the pros and cons of each?
overflow hidden - 非常可靠的方法。主要缺点是如果您在父元素上设置高度,则任何溢出都将......嗯,隐藏。我在创建带有 float 列表项的菜单时发现了这一点 - 子菜单不会出现。
清除元素 - 而不是换行符,我会使用带有 height: 0; clear: both;
的 div因为它不会在下面产生间隙。这是一种更可靠的方法,唯一的缺点是标记中的额外元素。
float 父元素 - 根据我的经验,有太多情况您不想 float 父元素,所以我会避免它。
你也可以使用生成内容的方法:
#parent:after {
content: ".";
visibility: hidden;
clear: both;
}
这样可以节省标记中额外元素的需要,但在 IE7 及更低版本中不起作用。
使用内联 block - 刚刚记住了这个方法。不要 float 这两列,而是将它们设置为 display: inline-block
它们会并排出现:
.child {
display: inline-block;
vertical-align: top;
}
使用此方法您必须记住的唯一一件事是,如果一个 block 的结束标记和另一个 block 的开始标记之间有空格,则列之间会出现一个空格(其大小取决于字体,因此很难来衡量)。只要你做...</div><div id=...
那么这种方法效果很好,并且优于 float 元素 IMO。
我是一名优秀的程序员,十分优秀!