在没有高度的 div 上使用 <br clear=all> 的 CSS 方式？ [复制]

Question

我曾经在 div 的末尾添加<br clear=all>，在 CSS 中没有高度值，以设置它的高度。

div 会根据内容缩小和增长。

不使用<br clear=all>，是否有更雄辩的方式将所有盒子的div高度设置为最高盒子的高度？请记住，div 会根据其中的内容改变高度。

下面是代码示例：

<div class="welcomeText">
  <div class="houseTiles2">
    <h1>TITLE<br><br></h1>
    <p><br>Body copy 1</p><br clear="all">
  </div>
  <div class="houseTiles">
    <h1 class="tileTitle">Title 2</h1><br>
    <p class="tileDesc">Text text text text text text text text</p>
 <br clear="all">
  </div>
  <div class="houseTiles">
    <h1 class="tileTitle">Title 3</h1><br>
    <p class="tileDesc">Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p><br clear="all">
  </div><br clear="all">
</div>

Answer 1

你应该使用

<br style="clear: both">

因为clear 属性已折旧。不过，这不是很雄辩。

实现同样事情的一个更有说服力的方法是使用一个类：

.clear {
  clear: both;
}

另一种方法是将以下类放在包含元素上：

.container {
  overflow: hidden; /* can also be "auto" */
}

然后是“clearfix”方法，您可以将它放在包含的元素上：

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

您可以在此处阅读更多内容：http://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/

编辑：如果您希望 div 具有相同的高度，并且您的目标是 IE10+，您可以使用 flexbox。很简单：http://learnlayout.com/flexbox.html

这里有一个关于 flexbox 的交互式教程：http://cvan.io/flexboxin5/

Answer 2

最好的办法是使用 clearfix 方法：

.welcomeText:before, .welcomeText:after {
   content:"";
   display:table;
}

.welcomeText:after {
  clear:both;
}

在 CSS 的开头，我们使用了一个带有“clear:both”属性的 div

但是现在有了 CSS，我们可以使用伪元素，它类似于 div 中的元素，但使用 CSS 创建。

您可以阅读任何有关清除浮动的文章。 例如：这个解释了浮动的问题：http://diywpblog.com/when-and-how-to-use-a-clearfix-css-tutorial/

但这不是您参加的答案，因为您希望所有子 div 与父 div 具有相同的高度。

您可以在父级上使用display:table，在其子级上使用display:table-cell，但删除float:left；

Answer 3

使用 CSS 无法自动使 div 具有相同的高度（除非您提供固定高度）。

但是，它是用 jQuery 的（使 div 的高度相同）：

var heights = [];

$(".houseTiles, .houseTiles2").each(function() {
    heights.push($(this).height());
});

var biggestheight = Math.max.apply(null, heights);

$(".houseTiles, .houseTiles2").each(function() {
    $(this).css("height",biggestheight);
});

如JSFiddle demo所示。

要使浮动元素具有高度，您可以为它们提供以下 CSS：

.houseTiles, .houseTiles2 {
    display:table;
    overflow:hidden;
}

这也会清除浮动，就像您对 clear=all 或 clear:both 所做的那样。