p не содержится в div с поплавком

Question

Я пытаюсь полностью понять проблему с плавающей запятой. В приведенном ниже коде, когда div1 плавает, слева div2 привязывается под ним, как и ожидалось, за исключением текста абзаца. Почему текст абзаца простирается ниже div1, когда divs идентичны?

HTML

<div id="div1"> 
    <p>This is div1</p> 
</div> 

<div id="div2"> 
    <p>This is div2</p> 
</div> 

CSS:

#div1 { 
    width: 100px; 
    height: 100px; 
    background-color: yellow; 
    float:left; 
} 

#div2 { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    border: 1px black solid; 
} 

https://jsfiddle.net/u9nugwbg/2/

Answer 1

Вам нужно та Мок position:absolute; в див1

Кодекса

#parent { 
 
    background-color: blue; 
 
    width: 500px; 
 
    height: 300px; 
 
} 
 

 
#div1 { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: yellow; 
 
    float:left; 
 
    position:absolute; <!--Make position:absolute--> 
 
} 
 

 
#div2 { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    border: 1px black solid; 
 
    
 

 
}

<div id="parent"> 
 

 
<div id="div1"> 
 
    <p>This is div1</p> 
 
</div> 
 
    
 
<div id="div2"> 
 
    <p>This is div2</p> 
 
</div> 
 
    
 
</div><!--closes parent-->

Если удалить Div1 вы увидите <p> в желтых делах.

Answer 2

You need ta moke foat:left; in div2. The Code: 
    #div2 
    { 
    float: left; 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    border: 1px black solid; 
    } 
    #parent { 
    background-color: blue; 
    width: 500px; 
    height: 300px; 
} 

#div1 { 
    width: 100px; 
    height: 100px; 
    background-color: yellow; 
    float:left; 
}