javascript - 为什么div设置float放在p当中会分割段落？同时为什么浮动元素不称开父元素的下边框？

Question

<p id="body">
        <p class="" id="frame">
            fdafagsdgdfg,gsdgfdgfdg,as afgaho, asfgaho g agsdgjoag apfghoiasdh                 og adshgoi ahogi ajoig adoghoaeg  aoigh oaig  jhoi 
            gadhoi  oihfga 
            fgadhoighadoighlfshojnoghsodfjoop jhaoigoiadhioghaoigae
            <p class="float-block"></p>
        </p>
        <p>
            fdafagsdgdfg,gsdgfdgfdg,as afgaho, asfgaho g agsdgjoag apfghoiasdh og adshgoi ahogi ajoig adoghoaeg  aoigh oaig  jhoi 
            gadhoi  oihfga 
            <p class="float-block"></p>
            fgadhoighadoighlfshojnoghsodfjoop jhaoigoiadhioghaoigae
        </p>
</p>

* {
    padding: 0;
    margin: 0;
}
#body {
    width: 960px;
    height: 500px;
    margin: 0 auto;
    background-color: #B5D05A;
    text-align: center;
}
#body p {
    display: block;
    color: red;
    width: 600px;
    margin: 0 auto;
    border:1px solid;
}
#frame {
    height: auto;
    width: 600px;
    margin: 0 auto;
    background-color: #3A5999;
}
.float-block {
    float: left;
    width: 50px;
    height: 50px;
    background-color: yellow;
}

问题一：如图一图二，为什么我的float元素放在p块里就显示正常，而放在p里就会把段落分割开，而且，更奇异的事情是，如果我把P标签当中的p标签换成span标签，style不变，则就可以正常显示。
问题二：为什么float元素不会撑开父级块元素的高度。
求高人解答

Answer 1

记住一点，float不要随意使用。

问题一：可以先了解块元素和行元素(内联元素)的区别，而在没有固定width和height时（auto不算，而且有兼容问题），float会更贴近于行元素的效果；如果固定了尺寸，则float只有布局的效果。
其次，p是个挺特殊的块元素，它内部不要有其他块元素存在（如p），但行元素可以，如span（h1~h6中不能含有块元素，也是同理）。不过span再加上display: block;则没有问题
具体研究，可以去了解下“元素嵌套”和“html嵌套规则”。

问题二：float可以理解为，把所设定的元素变成了行元素的效果，但这个效果只是用在排版方面。块元素是占位符的话，那么float后则变成行元素的排版。