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

编程入门行业动态更新时间:2024-10-25 02:23:02

本文介绍了浮动子元素:溢出:隐藏或清除:两者?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

作为一名网络开发人员，我经常会在另一个(父)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.

如果没有额外的 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?

推荐答案

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

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.