html - 向左浮动打破布局

Question

我有点困在这里

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

我的布局被打破了，因为我在一个段落和一个 anchor 标记中使用了 float:left，我已经尝试清除两者，但根本不起作用。

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;

这是一个工作 fiddle :

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

更多关于 clearfix 的信息:

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