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

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

<div id="body">
        <div class="" id="frame">
            fdafagsdgdfg,gsdgfdgfdg,as afgaho, asfgaho g agsdgjoag apfghoiasdh                 og adshgoi ahogi ajoig adoghoaeg  aoigh oaig  jhoi 
            gadhoi  oihfga 
            fgadhoighadoighlfshojnoghsodfjoop jhaoigoiadhioghaoigae
            <div class="float-block"></div>
        </div>
        <p>
            fdafagsdgdfg,gsdgfdgfdg,as afgaho, asfgaho g agsdgjoag apfghoiasdh og adshgoi ahogi ajoig adoghoaeg  aoigh oaig  jhoi 
            gadhoi  oihfga 
            <div class="float-block"></div>
            fgadhoighadoighlfshojnoghsodfjoop jhaoigoiadhioghaoigae
        </p>
</div>
* {
    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元素放在div块里就显示正常,而放在p里就会把段落分割开,而且,更奇异的事情是,如果我把P标签当中的div标签换成span标签,style不变,则就可以正常显示。
问题二:为什么float元素不会撑开父级块元素的高度。
求高人解答


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

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

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

【热门文章】
【热门文章】