Question

我很少被困在这里

https://jsfiddle.net/nap0qs3r/2/embedded/result/

我的布局正在破坏，因为我正在使用浮动：在一个段落和一个锚标记中，我已经尝试清除这两个，但根本不工作。

HTML：

<section class="disclaimer">
  <div class="container">
    <p>
      LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM 
    </p>
    <a href="mailto:reservas@me.com">
        contato
    </a>
  </div>
</section>

CSS：

.container {
  box-sizing: content-box;
  padding-left: 5%;
  padding-right: 5%;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (min-width: 620px) {
  .container {
    padding-left: 4.8%;
    padding-right: 4.8%;
    max-width: 688px;
  }
}
@media only screen and (min-width: 800px) {
  .container {
    padding-left: 4.4%;
    padding-right: 4.4%;
    max-width: 1360px;
  }
}
.disclaimer {
  background: #f98835;
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
  color: #fff;
  font-size: .875rem;
  font-weight: 400;
}
.disclaimer p {
  width: 100%;
  display: inline-block;
}
.disclaimer a {
  color: #fff;
  width: 100%;
  text-align: right;
}
@media only screen and (min-width: 620px) {
  .disclaimer p,
  .disclaimer a {
    float: left;
  }
  .disclaimer p {
    width: 80%;
  }
  .disclaimer a {
    width: 20%;
  }
}

我该怎么做才能解决这个问题？

Answer 1

您可以使用clearfix hack，它允许父母清除它的孩子。将以下样式应用于父<div class="container">

content: "";
display: table;
clear: both;

这是一个工作小提琴：

https://jsfiddle.net/nap0qs3r/5/

有关clearfix的更多信息：

http://css-tricks.com/snippets/css/clear-fix/

Answer 2

您只需要在所有浮动元素之后添加一个块（带有clear：both css）元素。例如。

    <section class="disclaimer">
  <div class="container">
    <p>
      LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM LOREM 
    </p>
    <a href="mailto:reservas@me.com">
        contato
    </a>
<div class="clearfix"></div>
  </div>
</section>

.clearfix{
 clear:both;
}

Answer 3

在您的css文件中进行微小的更改

.disclaimer,.container
{
float:left;
}

浮动左侧打破布局

3 个答案: