p标签是块状元素吗在没有设置宽度的时候，理论上不应该是独占一行显示的吗？

p标签是块状元素吗在没有设置宽度的时候，理论上不应该是独占一行显示的吗？为什么老师在设置浮动后，就可以在同一行显示三个p标签的内容？

源自：盒子模型 3-5 height属性

收起

1回答

卡布琦诺 2019-04-21 18:51:32

p标签是块级标签，建议同学上传一下代码，以便于准确定位问题并帮你解答

祝学习愉快！

提问者小吕123 #1

<!doctype html> <html> <head> <meta charset="utf-8"> <title>高宽属性</title> <style type="text/css"> p{ background-color: #ececec; height: 200px; float: left; } .one{ max-height: 100px; } .two{ min-height: 100px; } </style> </head> <body> <p>盒子模型高度height: 200px;</p> <p class="one">盒子模型高度max-height: 100px;</p> <p class="two">盒子模型高度min-width:250px;</p> </body> </html> 块状元素只设置一个高度的话，它的宽度根据它的内容填充的多少来确定，同时设置了p元素左浮动，所以才能够在一行上显示三个p标签的内容。

2019-04-21 19:52:41
卡布琦诺回复提问者小吕123 #2

原因是：p标签的100% 是相对其父元素的，从同学上传的代码上来看，这段代码中p标签的父元素是body，设置了浮动之后，p的宽度会自适应缩小，由内容撑开，设置了浮动能让块级元素在同一行显示，因此三个p在同一行显示，希望可以帮到你！

2019-04-22 10:14:07