如何防止浮动元素的父母崩溃？

Question

如何防止浮动元素的父母崩溃？

虽然像这样的元素<div>S通常使用float属性会给CSS新手带来一个令人吃惊的问题：如果浮动元素具有非浮动父元素，则父元素将崩溃。

例如：

<div>

  <div style="float: left;">Div 1</div>

  <div style="float: left;">Div 2</div>

</div>

本例中的父div将不膨胀要控制它的漂浮子-它似乎有height: 0.

你怎么解决这个问题？

我想在此提出一个详尽的解决办法清单。如果您意识到跨浏览器兼容性问题，请指出它们。

解决方案1

让父母浮起来。

<div style="float: left;">

  <div style="float: left;">Div 1</div>

  <div style="float: left;">Div 2</div>

</div>

行家*语义代码。

反方：您可能不总是希望父级浮动。即使你这样做了，你会让父母的父母浮起来吗，依此类推？你必须让每个祖先元素浮起来吗？

解决方案2

给父母一个显式的高度。

<div style="height: 300px;">

  <div style="float: left;">Div 1</div>

  <div style="float: left;">Div 2</div>

</div>

行家*语义代码。

反方不灵活-如果内容更改或调整浏览器大小，布局将中断。

解决方案3

在父元素中追加一个“间隔”元素，如下所示：

<div>

  <div style="float: left;">Div 1</div>

  <div style="float: left;">Div 2</div>

  <div class="spacer" style="clear: both;"></div>

</div>

行家*简单易懂的代码。

反方没有语义；间隔div仅作为布局黑客存在。

解决方案4

将父级设置为overflow: auto.

<div style="overflow: auto;">

  <div style="float: left;">Div 1</div>

  <div style="float: left;">Div 2</div>

</div>

行家：不需要额外的div。

反方看上去像是黑客-那不是overflow财产的指定用途。

评论？其他建议？

Answer 1

我通常使用overflow: auto虽然严格地说，这并不是用于溢出的目的，但它是有点联系-足够容易记住，当然。意义float: left在本例中，海事组织已将其扩展到各种用途，而不是溢流。

Answer 2

当浮动元素位于容器框中时，问题就会发生，该元素不会自动强制容器的高度调整到浮动元素。当元素被浮动时，它的父元素不再包含它，因为浮点数被从流中移除。您可以使用两个方法来修复它：{ clear: both; }clearfix一旦您了解了正在发生的事情，请使用下面的方法“清除”它。.clearfix:after&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;content:&nbsp;"."; &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;block; &nbsp;&nbsp;&nbsp;&nbsp;clear:&nbsp;both; &nbsp;&nbsp;&nbsp;&nbsp;visibility:&nbsp;hidden; &nbsp;&nbsp;&nbsp;&nbsp;line-height:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;0;}.clearfix&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;inline-block;}html[xmlns]&nbsp;.clearfix&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;block;}*&nbsp;html&nbsp;.clearfix&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;1%;}示范：)