css - Bootstrap容器的块大小逻辑很奇怪

我在引导程序中有两个块有这个问题



为什么页脚（＃2）具有400px height？

如果我删除了顶部块（＃1）-footer height = 0px（工作正常）；如果我设置overflow:hidden (to #1 block)-正常工作！但是为什么没有overflow - footer高度又大呢？

演示：

.footer{
  background-color: #f60;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="new_search" style="height: 100px;">
    <div class="container">
        <div class="row">
            <div class="col-xs-12" style="height: 500px;"></div>
        </div>
    </div>
</div>
<div class="container footer">
  <div class="row"></div>
</div>

最佳答案

我找到了这个
https://www.w3.org/TR/CSS2/visuren.html#floats

浮动图像遮盖了重叠的块框的边界。



第一div（＃1）具有height:100px;，但内容(.col-xs-12)具有float: left; height: 500px;

float: left;用height:500px创建一个“飞行箱”

div{
  margin: 1px;
}
#div1{
  height: 50px;
  border: 3px solid blue;
}
#div2{
  height: 150px;
  width: 100%;
  border: 3px solid green;
  float: left;
}

<div id="div1">
  <div id="div2"></div>
</div>

如果我创建一个新的新div＃2（默认为clear: none;）-将该块放置在顶部（因为clear: none;）

div{
  margin: 1px;
}
#div1{
  height: 50px;
  border: 3px solid blue;
}
#div2{
  height: 150px;
  width: 100%;
  border: 3px solid green;
  float: left;
}
#div3{
  border: 3px solid red;
}

<div id="div1">
  <div id="div2"></div>
</div>
<div id="div3"></div>

但是，如果我将带有clear: both;的新块＃3添加到div中-将该块放到底部，因为clear: both;从“ flying box”下推

div{
  margin: 1px;
}
#div1{
  height: 50px;
  border: 3px solid blue;
}
#div2{
  height: 150px;
  width: 100%;
  border: 3px solid green;
  float: left;
}
#div3{
  border: 3px solid red;
}
#div4{
  clear: both;
  border: 3px solid black;
}

<div id="div1">
  <div id="div2"></div>
</div>
<div id="div3">
  <div id="div4"></div>
</div>

因此，从div＃1（红色块）的末尾到子代（块＃3）的末尾位置生成的页脚高度



我为我的英语不好而道歉:)

关于css - Bootstrap容器的块大小逻辑很奇怪，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36303976/