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

如果添加

overflow: hidden;

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

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

Answer 2

使用

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

父亲的位置相对和身高自动不扩大到浮动儿童的高度？

2 个答案: