Html 为什么 <div class="clear"></div> 在容器 DIV 中的多个浮动 DIVS 之后使用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10184934/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why <div class="clear"></div> is used after multiple floating DIVS in a container DIV?
提问by OM The Eternity
I have encountered a <div class="clear"></div>at many places, but I am not aware why is it done? Can someone brief me on this, why it is used in css? This is the CSS:
我<div class="clear"></div>在很多地方都遇到过，但我不知道为什么会这样？有人可以向我简要介绍一下，为什么在 css 中使用它？这是CSS：
div.clear {
clear:both;
}
回答by deceze
The height of an element is determined by its child elements (unless it is explicitly set). E.g.:
元素的高度由其子元素决定（除非明确设置）。例如：
+------A------+
|+-----------+|
|| B ||
|+-----------+|
|+-----------+|
|| C ||
|+-----------+|
+-------------+
The height of A is determined by where the lower border of its child C is.
A 的高度由其子 C 的下边界所在的位置决定。
Now, floating elements do not count towards the height of their parents, they're taken out of the regular flow:
现在，浮动元素不计入其父元素的高度，它们被从常规流中取出：
+------A------+
+--+---------++
| B |
+---------+
+---------+
| C |
+---------+
The A element is collapsed to a minimal height, because its two children are floated.
A 元素折叠到最小高度，因为它的两个子元素是浮动的。
Clearing elements are introduced to restore the correct height:
引入清除元素以恢复正确的高度：
+------A------+
| +---------+|
| | B ||
| +---------+|
| +---------+|
| | C ||
| +---------+|
|+-----D-----+|
+-------------+
The D element is a zero-height element with the clearattribute set. That causes it to fall below the floated elements (it clearsthem). That causes A to have a regular child element to calculate its height by. That's the most typical use case at least.
D 元素是一个零高度元素，其clear属性集。这会导致它低于浮动元素（它会清除它们）。这会导致 A 有一个常规的子元素来计算其高度。至少这是最典型的用例。
The often better solution to introducing extra HTML elements is to set A to overflow: hiddenthough. That has the effect of forcing a height calculation, which has the same effect of growing the height to the desired size. This solution may or may not have other side effects though.
引入额外的 HTML 元素通常更好的解决方案是将 A 设置为overflow: hidden尽管。这具有强制高度计算的效果，这与将高度增加到所需大小的效果相同。但是，此解决方案可能有也可能没有其他副作用。
回答by Brian
It is to clear out floating styles.
就是清除浮动样式。
clear: http://www.w3.org/wiki/CSS/Properties/clear
清除：http: //www.w3.org/wiki/CSS/Properties/clear
回答by asprin
To sum it up, it's like telling the browser to not allow anything (i.e., any element be it a div, span, anchor, table etc) either on the left or on the right of the previous element. This will make the next element move to the next line.
总而言之，这就像告诉浏览器不允许在前一个元素的左侧或右侧出现任何内容（即，任何元素，无论是 div、span、anchor、table 等）。这将使下一个元素移动到下一行。
回答by Shailender Arora
The Most common problems we face when we write the code with float based layouts is that the parent div container doesn't expand to the height of the child floating elements. The typical solution to fix this is by adding an element with clear float after the floating elements or adding a clearfix to the parent div.
当我们使用基于浮动的布局编写代码时，我们面临的最常见问题是父 div 容器没有扩展到子浮动元素的高度。解决这个问题的典型解决方案是在浮动元素之后添加一个带有 clear float 的元素，或者向父 div 添加一个 clearfix。
I am giving you some two good examples for better understanding about clearing floats :-
我给你一些很好的例子，以便更好地理解清除浮动：-
http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow
http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow
回答by Raza
Good explaination by deceze. But <div class="clear"></div>is old method and unprofessional try using
deceze 很好的解释。但是<div class="clear"></div>是旧方法和不专业的尝试使用
#anyelement:after { display: block; content: "."; clear: both; font-size: 0; line-height: 0; height: 0; overflow: hidden; }
just keep adding other elements which needs to cleared like #firstlement:after, .secondelement:afterand so on.
只需继续添加需要清除的其他元素，#firstlement:after, .secondelement:after等等。
