css - 使图像下方(不是直接)的元素不受 float 图像的影响

Question

我有以下代码，其中包括图像和文本以及父级之后的一些其他信息。我担心的是跟随其父元素的元素会受到 float 图像的影响，有没有办法让该元素正常显示。

.floated {float:left;}

<div = "parent">
  <p>This text is above the picture.</p>
<img class = "floated" src = "http://www.userlogos.org/files/logos/pek/stackoverflow2.png"/>
  <p>This text should wrap around the floated image</p>
  </div>
<div = "another_element">
  <p class = "not_floated">This text shouldn't be affected by the floated image, but for some reason it is what should be done to it.</p>
  </div>

Answer 1

将类 .fix 添加到父级或最后一个 p 并设置 .fix:after css 如下:JS Fiddle ^{( 1 )}

.floated {
  float: left;
  outline: 1px solid green;
}
.fix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

<div id="parent" class="fix">
  <p>This text is above the picture.</p>
  <img class="floated" src="http://www.userlogos.org/files/logos/pek/stackoverflow2.png" />
  <p>This text should wrap around the floated image</p>
</div>
<div id="another_element">
  <p class="not_floated">This text shouldn't be affected by the floated image, but for some reason it is what should be done to it.</p>
</div>

---

^{( 1 )} https://css-tricks.com/snippets/css/clear-fix/