html - 为什么第二个 div 中的元素不向左浮动？

Question

代码笔:http://codepen.io/leongaban/pen/solzy

我一定是脑残了，不知道为什么第二个 div 中的元素没有正确 float 。在第二个 copy_block div 中，图像应该在右边，复制在左边。

HTML

    <div class="copy_block">
        <div class="float_left">
            <img src="http://placehold.it/350x150" alt="How does Who@ help?"/>
        </div>
        <div class="float_right">
            <h2>Header Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat iaculis odio ut tincidunt. Suspendisse placerat gravida nisi sit amet imperdiet. Duis eget est elit. Cras vitae dignissim lectus, nec pulvinar tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque at eros at est blandit mollis ac vulputate eros. Nunc mauris libero, tempor nec aliquam id, tincidunt eget nibh. Maecenas pulvinar sem ac turpis porttitor, nec scelerisque odio egestas. Vestibulum lacus ligula, semper id quam viverra, ultricies congue dui. Curabitur at rhoncus nibh. Aenean luctus justo ac massa ultricies, sit amet pulvinar ipsum fringilla.</p>
        </div>
    </div>

    <div class="copy_block">
        <div class="float_left">
            <h2>Header Title 2</h2>
            <p>Curabitur arcu neque, tempus eget dolor vel, hendrerit ornare lectus. Donec commodo ante sit amet erat fringilla commodo a in mauris. Aliquam erat volutpat. Donec orci odio, pulvinar eu luctus ut, cursus ultrices massa. Maecenas tempor tincidunt hendrerit. Vivamus faucibus scelerisque urna, rutrum hendrerit nisl adipiscing a. Proin ante nisl, vulputate malesuada pharetra id, scelerisque sed ligula.</p>
        </div>
        <div class="float_right">
            <img src="http://placehold.it/350x150 " alt="Why is Who@ different?"/>
        </div>
    <div>

<div>

CSS

#about-container {
    margin: 0 auto;
    width: 80%;
    max-width: 1200px;
    height: 100%;
    font-family: Arial;
    font-size: 1em;
    color: #686662;
}

.copy_block {
  display: block;
  margin: 0 auto;
  padding: 10px;
  width: 80%;
  height: 100%;
  background: cyan;
}

.float_left {
   float: left;
}
.float_right {

}

Answer 1

尝试为 float 元素添加一个特定的宽度。由于您没有 float <img />直接元素，<div />您正在 float 的内容将从其子元素(即 <p /> 标签)中获取其宽度。

这是一个更新的 Codepen 链接:http://codepen.io/anon/pen/Bxcha