Css在图像和文本之间浮动

Question

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

图像浮动：左; + margin-right和包含内容的div已设置为。

如何在右侧制作文字统计？

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; }

小提琴：

http://jsfiddle.net/m1p981db/

使用overflow以外的visible，会创建一个新的框上下文，以防止框重叠。这意味着您的浮动容器和内容容器将保持自己，而不是彼此缠绕。