1
496
fdafagsdgdfg,gsdgfdgfdg,as afgaho, asfgaho g agsdgjoag apfghoiasdh og adshgoi ahogi ajoig adoghoaeg aoigh oaig jhoi
gadhoi oihfga
fgadhoighadoighlfshojnoghsodfjoop jhaoigoiadhioghaoigae
fdafagsdgdfg,gsdgfdgfdg,as afgaho, asfgaho g agsdgjoag apfghoiasdh og adshgoi ahogi ajoig adoghoaeg aoigh oaig jhoi
gadhoi oihfga
fgadhoighadoighlfshojnoghsodfjoop jhaoigoiadhioghaoigae
* {
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元素不会撑开父级块元素的高度。
求高人解答
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
记住一点，float不要随意使用。
问题一：可以先了解块元素和行元素(内联元素)的区别，而在没有固定width和height时（auto不算，而且有兼容问题），float会更贴近于行元素的效果；如果固定了尺寸，则float只有布局的效果。
其次，p是个挺特殊的块元素，它内部不要有其他块元素存在（如p），但行元素可以，如span（h1~h6中不能含有块元素，也是同理）。不过span再加上
display: block;则没有问题具体研究，可以去了解下“元素嵌套”和“html嵌套规则”。
问题二：float可以理解为，把所设定的元素变成了行元素的效果，但这个效果只是用在排版方面。块元素是占位符的话，那么float后则变成行元素的排版。