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

Question

我有以下结构，正如您将在此 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>

Answer 1

使用

min-height instead of height in . float class

Answer 2

如果你添加一个

overflow: hidden;

到你的classparent，这将开始一个新的"block formatting context"。然后 parent 将跨越所有 children 元素的完整高度。

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

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

Parent with position relative and height auto not expanding to height of float children?

html

css

height

css-float