HTML：浮动：左侧和相对位置

Question

当我使用具有float：left和另一个具有相对位置的div块时，第二个块意外地表现 - 文本超出了框及其背景颜色。这里发生了什么？

https://jsbin.com/merehowoxa/1/edit?html,output

        #first-section{

            color:black;
            background-color:pink;
            width:100px;
            float:left;

        }

        #second-section{

            color:purple;
            background-color:yellow;
            width:100px;
            height:100px;
            position:relative;
            left:500px;
            top:200px;

        }

Answer 1

每当你使用Float：left时，需要清除它。

在你的div的

之间加上这个

 <div id="first-section">

        <p>Text1</p>
        <p>Text2</p>

  </div>

  <div style="clear:both">

  <div id="second-section">