CSS布局求助：如何让p标签在浮动div下方并排显示？

嘿，我明白你遇到的这个小坑了——你已经用float把两个div完美左右对齐，但给p标签加clear: both却完全没生效，反而跑到Div 1旁边去了。其实原因很简单：clear属性只对块级元素生效，而你给p标签设置了display: inline，把它变成了行内元素，clear自然就不起作用啦！

下面给你两种简单靠谱的解决方案，你可以根据需求选：

方案1：给p标签套一个块级容器（最推荐） #

这种方法最直观，也不会引入额外的样式问题。我们只需要给两个p标签外面加一个div容器，然后给这个容器设置clear: both，让它跑到所有浮动元素的下方，里面的p标签保持inline就能正常并排了。

修改后的CSS代码：

div { width: 100px; height: 100px; border: 1px solid black; }
#first-div { float: left; }
#second-div { float: right; }
.p-wrapper { clear: both; } /* 新增容器，负责清除浮动 */
p { width: 80px; border: 2px dotted red; display: inline; }

修改后的HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="first-div">Div 1.</div>
<div id="second-div">Div 2.</div>
<!-- 新增容器包裹p标签 -->
<div class="p-wrapper">
  <p>p 1</p>
  <p>p 2</p>
</div>
</body>
</html>

方案2：用inline-block替代inline（无需额外容器） #

如果你不想额外加HTML元素，可以把p标签的display改成inline-block，然后给第一个p标签设置clear: both。不过要注意，inline-block元素之间会因为HTML里的换行产生空白间隙，需要额外处理一下。

修改后的CSS代码：

div { width: 100px; height: 100px; border: 1px solid black; }
#first-div { float: left; }
#second-div { float: right; }
p { 
  width: 80px; 
  border: 2px dotted red; 
  display: inline-block; 
  margin: 0; /* 清除默认边距 */
}
p:first-of-type { clear: both; } /* 让第一个p在div下方 */

要消除inline-block的空白间隙，你可以把两个p标签写在一行：

<p>p 1</p><p>p 2</p>

或者给它们的父元素（比如body）设置font-size: 0，再给p标签恢复正常字体大小：

body { font-size: 0; }
p { font-size: 16px; /* 恢复默认字体大小 */ }

为什么原来的代码不生效？ #

再复盘一下：当你给p标签设置display: inline后，它就不再是块级元素了，clear属性对行内元素完全无效，所以p标签会跟着浮动元素的排版走，跑到Div 1旁边。而块级元素的clear: both会强制自己排在所有浮动元素的下方，这就是方案1能解决问题的核心原因。

内容的提问来源于stack exchange，提问作者wlodekDev