css float 在图片和文字之间

Question

我有这种情况，我想在右侧设置文本，但我不想越过红线

图片有float:left; + margin-right和内容所在的div设置了一个with。

如何使文本统计在右侧？

Answer 1

奇怪的是，将 overflow: hidden 应用到您的右侧列会给您带来您想要的效果:

HTML:

<div class="content">
    <div class="image">
        <img src="http://placehold.it/150x150" />
    </div>
    <div class="content">
        Banh mi fanny pack selfies disrupt. Small batch art party umami chia bicycle rights flannel fingerstache, wolf single-origin coffee mustache dreamcatcher squid. Odd Future drinking vinegar Echo Park yr. Bicycle rights stumptown PBR, fashion axe put a bird on it raw denim photo booth sriracha synth. Pitchfork chambray next level, photo booth PBR hoodie VHS Blue Bottle squid church-key keytar meh bespoke organic master cleanse. Tousled Williamsburg synth normcore fap. Roof party Thundercats tofu, Cosby sweater Tonx Banksy chambray direct trade Pitchfork disrupt ethical kitsch keffiyeh mlkshk synth.
    </div>
</div>

CSS:

.image { float: left;  margin-right: 10px; }
.content { overflow: hidden; }

fiddle :

http://jsfiddle.net/m1p981db/

对于 visible 以外的 overflow，将创建​​一个新的框上下文，以防止框重叠。这意味着您的 float 容器和内容容器将保持独立，而不是相互环绕。