HTML5 / CSS3 - 浮动问题

Question

我有一个“posts__box”（“Davi Jesus”部分），即使有一个“posts__box - left”类（“float：left”），它也向右浮动。 HTML很好，CSS很好，我吓坏了，因为我无法理解为什么会发生这种情况。

顺便说一句：“revista”的意思是“杂志”，这是我第一次尝试应用BEM方法。我是一名新手网页设计师。

图片：

.posts {
  width: 100%;
}

.container {
  float: left;
  width: 80%;
  height: 1400px;
  margin: 0 135px;
  padding: 0;
  background: #ffffff;
}

.box--btn {
  margin-top: 10px;
  border: 1.5px solid black;
  box-shadow: 2px 2px 2px dimgray;
}

.posts__box {
  margin-top: 40px;
  margin-left: 20px;
  width: 30%;
}

.box--title {
  text-align: center;
}

.box--img {
  width: 100%;
  box-shadow: 3px 3px 3px Dimgray;
}

.box--text {
  padding: 5px;
}

.box--author {
  float: right;
  width: 46%;
  height: 50px;
}

.box--author--text {
  margin-top: 10px;
  margin-left: 6px;
}

.box--continue {
  float: left;
  width: 46%;
  height: 50px;
}

.box--continue--text {
  margin-top: 12px;
  margin-left: 7px;
}

.posts__btns {
  float: left;
  margin-top: 20px;
  width: 100%;
  height: 200px;
}


/* MODIFIERS */

.revista__posts--height {
  height: 3000px;
}


/* posts */

.title--red {
  color: rgba(233, 26, 26, 1);
}

.title--size-small {
  font-size: 30px;
  text-shadow: 1.5px 1.5px black;
}

.title--size-large {
  font-size: 60px;
  text-shadow: 3px 3px black;
}

.box--btn--red {
  background: rgba(233, 26, 26, 1);
}

.continue--white {
  color: #ffffff;
  text-shadow: 1.5px 1.5px black;
}

.box--btn--black {
  background: #212121;
}

.author--white {
  color: #ffffff;
  text-shadow: 2px 2px black;
}

.posts__box--left {
  float: left;
}

.posts__box--right {
  float: right;
}

.posts__box--margin--fix--left {
  margin-top: 10px;
  margin-left: 40px;
}

.posts__box--margin--fix--top {
  margin-top: 34px;
  margin-left: 40px;
}

.posts__btns--left {
  float: left;
  margin-left: 20px;
}

.posts__btns--right {
  float: right;
  margin-right: 20px;
}


/* revista */

.container__border {
  border-top: 4px solid black;
  border-left: 4px solid black;
  border-right: 4px solid black;
}

.revista__container--height {
  height: 4800px;
}

<article class="posts">

  <section class="container revista__container--height container__border">

    <!-- davi jesus -->
    <section class="posts__box posts__box--left">

      <div class="box--title">
        <a class="title--red --hover" href="..\revista\artistas\davi-jesus.html">
         <h1 class="title--size-small --hover--darkred">Davi de Jesus do Nascimento:<br> corpo de rio</h1>
        </a>
      </div>

      <div>
       <a href="..\revista\artistas\davi-jesus.html">
         <img class="box--img" src="..\_img\posts\davi-de-jesus\instax\6.png" alt="">
       </a>
      </div>

  <div class="box--continue box--btn box--btn--red">
    <a class="--hover" href="..\revista\artistas\davi-jesus.html">
      <h5 class="box--continue--text continue--white -font--very-small --hover--dimgray">CONTINUAR A LEITURA</h5>
    </a>
  </div>

  <div class="box--author box--btn box--btn--black">
   <a class="--hover" href="..\revista\artistas\daniel-jesus.html">
     <h2 class="box--author--text author--white -font--small --hover--dimgray">Davi Jesus</h2>
   </a>
  </div>

</section>

Answer 1

我只是用一个简单的“清除：左”类来修复它。我想这只是一些奇怪的bug或类似的东西。如果有人有不同的解释并可以与我们分享，我将不胜感激。谢谢！