Question

下面你可以看到我的代码。似乎页脚被卡住了＃34;在h2_c div的底部，不应该在.content div的底部。为什么？我尝试使用定位，但它没有用。

Thak You。

＆＃13;

.header {
  background: #a7a7a7;
  min-height: 700px;
  position: relative;
}
.content {
  width: 940px;
  margin: 70px auto 0 auto;
}
.h2_c {
  color: #333;
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  margin-bottom: 30px;
}
.one {
  float: left;
  width: 300px;
  height: 400px;
  background: green;
  position: relative;
}
.info {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.two {
  float: left;
  width: 300px;
  height: 400px;
  background: green;
  margin-left: 20px;
  position: relative;
}
.three {
  float: right;
  width: 300px;
  height: 400px;
  background: green;
  position: relative;
}
.h2 {
  color: #fff;
  font-size: 28px;
  padding: 20px 20px 10px 20px;
  margin: 0;
}
.p {
  color: #ccc;
  margin: 0;
  padding: 0px 20px 10px 20px;
  font-size: 16px;
}
.span {
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 3px 10px 3px 10px;
  font-size: 11px;
  -webkit-border-radius: 28px;
  -moz-border-radius: 28px;
  border-radius: 28px;
  background: blue;
  margin: 20px;
}
.footer {
  border-top: 4px solid orange;
}

＆＃13;

<div class="header"></div>
<div class="content">
  <h2 class="h2_c">Content</h2>
  <div class="one">
    <div class="info">
      <span class="span">Text 1</span>
      <h2 class="h2">Some really cool text</h2>
      <p class="p">Text text text text text text text text text text text text text text text text text text.</p>
    </div>
  </div>
  <div class="two">
    <div class="info">
      <span class="span">Text 2</span>
      <h2 class="h2">Some really cool text</h2>
      <p class="p">Text text text text text text text text text text text text text text text text text text.</p>
    </div>
  </div>
  <div class="three">
    <div class="info">
      <span class="span">Text 3</span>
      <h2 class="h2">Some really cool text</h2>
      <p class="p">Text text text text text text text text text text text text text text text text text text.</p>
    </div>
  </div>
</div>
<div class="footer"></div>

＆＃13;

Answer 1

你的文字＆＃34;非常酷的文字＆＃34;部分正在转义.content部分，因为（默认情况下）在计算容器的高度时不考虑浮动。

将overflow: auto添加到.content以创建新的block formatting context并修复此问题。

＆＃13;

.header {
  background: #a7a7a7;
  min-height: 700px;
  position: relative;
}
.content {
  width: 940px;
  margin: 70px auto 0 auto;
  overflow: auto;
}
.h2_c {
  color: #333;
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  margin-bottom: 30px;
}
.one {
  float: left;
  width: 300px;
  height: 400px;
  background: green;
  position: relative;
}
.info {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.two {
  float: left;
  width: 300px;
  height: 400px;
  background: green;
  margin-left: 20px;
  position: relative;
}
.three {
  float: right;
  width: 300px;
  height: 400px;
  background: green;
  position: relative;
}
.h2 {
  color: #fff;
  font-size: 28px;
  padding: 20px 20px 10px 20px;
  margin: 0;
}
.p {
  color: #ccc;
  margin: 0;
  padding: 0px 20px 10px 20px;
  font-size: 16px;
}
.span {
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 3px 10px 3px 10px;
  font-size: 11px;
  -webkit-border-radius: 28px;
  -moz-border-radius: 28px;
  border-radius: 28px;
  background: blue;
  margin: 20px;
}
.footer {
  border-top: 4px solid orange;
}

＆＃13;

<div class="header"></div>
<div class="content">
  <h2 class="h2_c">Content</h2>
  <div class="one">
    <div class="info">
      <span class="span">Text 1</span>
      <h2 class="h2">Some really cool text</h2>
      <p class="p">Text text text text text text text text text text text text text text text text text text.</p>
    </div>
  </div>
  <div class="two">
    <div class="info">
      <span class="span">Text 2</span>
      <h2 class="h2">Some really cool text</h2>
      <p class="p">Text text text text text text text text text text text text text text text text text text.</p>
    </div>
  </div>
  <div class="three">
    <div class="info">
      <span class="span">Text 3</span>
      <h2 class="h2">Some really cool text</h2>
      <p class="p">Text text text text text text text text text text text text text text text text text text.</p>
    </div>
  </div>
</div>
<div class="footer"></div>

＆＃13;

Answer 2

因为当你浮动一个元素时，你会从普通的html流中获取它。如果您插入如下行：

<div style="clear:both"></div>

在3个浮动div's的正下方，它会按预期工作。

你可以使用带有:after属性的clear: both伪元素来做同样的事情，但我只是第一选择的粉丝（对于更多的“旧”浏览器兼容性）。

添加overflow:hidden也有效，但我不喜欢那种方法......如果你不想隐藏溢出怎么办？

为什么页脚不会出现在底部？

2 个答案: