具有相对位置和高度自动的父级不扩展到浮动子级的高度？答案

【问题标题】：Parent with position relative and height auto not expanding to height of float children?具有相对位置和高度自动的父级不扩展到浮动子级的高度？
【发布时间】：2016-06-25 09:31:56
【问题描述】：

我有以下结构，正如您将在 JSfiddle 中看到的那样，.parent 元素的高度不会自动扩展到其内容的总高度。

我做错了什么？？

CSS

.container {
  float: left;
  width: 100%;
  height: auto;
}
.parent{
    position: relative;
    margin: 0 auto;
    max-width: 200px;
    height: auto;
    border: 10px solid transparent;
    border-top-width: 50px;
    border-bottom-width: 50px;
    width: 100%;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
}
.float{
  float: left;
  width: 100%;
  position: relative;
  height: 70px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  background-color: blue;
}
.float:nth-child(2){
  background-color: red;
}

HTML

<div class="parent">
   <div class="float"></div>
   <div class="float"></div>
</div>
<div class="parent">
   <div class="float"></div>
   <div class="float"></div>
</div>
<div class="parent">
   <div class="float"></div>
   <div class="float"></div>
</div>

【问题讨论】：

标签： html css css-float height

【解决方案1】：

如果你添加一个

overflow: hidden;

对于您的班级家长，这将启动一个新的“块格式化上下文”。然后父元素将跨越所有子元素的完整高度。

http://colinaarts.com/articles/the-magic-of-overflow-hidden/

【讨论】：

这毫无意义，但它正在工作，所以谢谢！ :-)

【解决方案2】：

使用

最小高度代替高度在。浮动类

【讨论】：