Question

我有以下代码，其中包含图像和文本以及其父级后的其他信息。我担心的是，它的父元素后面的元素会受到浮动图像的影响，有没有办法让这个元素正常显示。

.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/

使图像下面的元素（不是直接）不受浮动图像的影响

1 个答案: