浮动子元素:溢出:隐藏或清除:两者?

问题描述

作为一名网络开发人员，我经常会在另一个(父)div 中放置两个浮动(子)div.实际上我整天都在这样做.

As a web developer I frequently will have two floated (child) divs inside of another (parent) div. Actually I do this all day long.

<style type="text/css">
    #left {float:left;}
    #right {float:right;}
</style>
<div id="parent">
    <div id="left" class="child">&nbsp;</div>
    <div id="right" class="child">&nbsp;</div>
</div>

如果没有额外的 css/html，这是行不通的，因为父级不会自动增长以适应浮动的子级.有两种流行的方法可以克服这个问题:
1) 将 overflow:hidden 添加到父级的 css 中.
2) 添加第三个清除"子 <br style="clear:both;"/>.

This doesn't work without an extra bit of css/html because the parent doesn't automatically grow to fit floated children. There are two popular ways of overcoming that:
1) Add overflow:hidden to the parent's css.
2) Add a 3rd "clearing" child <br style="clear:both;" />.

我知道关于这些事情还有其他一些类似的问题，但我的问题是:

I know there's a few other similar questions about such things, but my question is:

哪种方法更好，为什么?什么各有优劣?

Which method is better and why? What are the pros and cons of each?

推荐答案

1. 隐藏溢出 - 非常可靠的方法.主要缺点是如果您在父元素上设置高度，则任何溢出都将......嗯，隐藏.我在创建带有浮动列表项的菜单时发现了这一点 - 子菜单不会出现.

1. Hidden overflow - pretty solid method. The main disadvantage is if you set a height on the parent element, any overflow will be...well, hidden. I found this when creating a menu with floated list items - the submenus would not appear.

清除元素 - 而不是换行符，我会使用 height: 0; 的 divclear: both; 因为它不会在下面产生间隙.这是一种更可靠的方法，唯一的缺点是标记中的额外元素.

Clearing element - rather than a line break, I would use a div with height: 0; clear: both; since it won't create a gap below. This is a more solid method, the only disadvantage being an extra element in the markup.

浮动父元素 - 根据我的经验，有太多情况您不想浮动父元素，所以我会避免它.

Float the parent - in my experience there are too many situations where you don't want to float the parent element, so I would avoid it.

你也可以使用生成内容的方法:

You can also use the generated content method:

#parent:after {
  content: ".";
  visibility: hidden;
  clear: both;
}

这样可以节省标记中额外元素的需要，但在 IE7 及更低版本中不起作用.

This saves the need for an extra element in the markup, but it won't work in IE7 and below.

使用内联块 - 刚刚记住了这个方法.不要浮动这两列，而是将它们设置为 display: inline-block ，它们将并排显示:

Use inline blocks - just remembered this method. Instead of floating the two columns, set them to display: inline-block and they will appear side-by-side:

.child {
  display: inline-block;
  vertical-align: top;
}

使用此方法您必须记住的唯一一件事是，如果一个块的结束标记和另一个块的开始标记之间有空格，则列之间会出现一个空格(其大小取决于字体，因此很难来衡量).只要你这样做 ...</div><div id=... 那么这个方法就可以正常工作并且优于浮动元素 IMO.

Only thing you must remember with this method is if there is any whitespace between the close tag of one block and the opening tag of another, a space will appear between the columns (the size of which depends on the font so it difficult to gauge). As long as you do ...</div><div id=... then this method works fine and is superior to floating elements IMO.

这篇关于浮动子元素:溢出:隐藏或清除:两者?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！