Float div left - 父元素的文本也包含此 div？

Question

Aloha - 我一直在重新创建本教程 - [CSS 定位][1] -

[1]: http://www.barelyfitz.com/screencast/html-training/css/positioning/ 真正理解教程。在本教程的第 7 步，我遇到了一些我无法弄清楚的问题。在本教程的第 7 步中，您将看到文本 "id = div-1" 位于向左浮动的 "div-1a" 上方。

如果您看一下我的代码笔 - http://codepen.io/DarrenHaynes/pen/gLoYpp/ - 您会看到文本 "id = div-1" 与 "div-1a" 的右侧对齐。我没想到会这样，因为 "div-1" 是 "div-1a" 的父级。因此我不知道如何让我的代码笔复制教程。

我在 codepen 上的代码：

HTML:

<div id="div-before">
  id = div-before
</div>
<div id="div-1">
  id = div-1
  <div id="div-1a">
    id = div-1a
    <br>
    <br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.
  </div>
  <div id="div-1b">
    id = div-1b<br><br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan
    augue ipsum id lorem.
  </div>
  <div id=div-1c>
    id = div-1c
  </div>
</div>
<div id="div-after">
    id = div-after
</div>

CSS:

#div-before,
#div-after {
  margin: 0 auto;
  width: 400px;
  font-size: 20px;
  background-color: #8888DD;
  padding: 2px 5px;
}

#div-1 {
  position: relative;
  margin: 0 auto;
  width: 400px;
  color: white;
  padding: 20px 10px 10px 10px;
  background-color: black;
}

#div-1a {
  float: left;
  width: 200px;
  padding: 3px;
  background-color: red;
}

#div-1b {
  padding: 3px;
  background-color: green;
}

#div-1c {
  padding: 3px;
  background-color: #33D;
}

Answer 1

您可以将 "div-1" 的标题包裹在 'p' 标签周围：

<div id="div-before">
  id = div-before
</div>
<div id="div-1">
  <p>id = div-1</p>
  <div id="div-1a">
    id = div-1a
    <br>
    <br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.
  </div>
  <div id="div-1b">
    id = div-1b<br><br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan
    augue ipsum id lorem.
  </div>
  <div id=div-1c>
    id = div-1c
  </div>
</div>
<div id="div-after">
    id = div-after
</div>

CSS:

#div-before,
#div-after {
  margin: 0 auto;
  width: 400px;
  font-size: 20px;
  background-color: #8888DD;
  padding: 2px 5px;
}

#div-1 {
  position: relative;
  margin: 0 auto;
  width: 400px;
  color: white;
  padding: 20px 10px 10px 10px;
  background-color: black;
}

#div-1a {
  float: left;
  width: 200px;
  padding: 3px;
  background-color: red;
}

#div-1b {
  padding: 3px;
  background-color: green;
}

#div-1c {
  padding: 3px;
  background-color: #33D;
}

这是代码笔：http://codepen.io/anon/pen/xRJNdZ

Float div left - 父元素的文本也包含此 div？

Float div left - Text of Parent element wrapping this div also?

css

parent-child

css-float