Float div left - このdivもラップする親要素のテキストですか？

Question

アロハ - 私はこのチュートリアルで再作成されています - [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を取得する方法を把握することはできません。

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：あなたは 'P' タグを中心に "DIV-1" のためにあなたの見出しをラップすることができ

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

ここCodepenです：http://codepen.io/anon/pen/xRJNdZ