如何在双浮动块间为引用元素添加缩进且避免文本截断

我明白你的困扰——在左右两个浮动块之间的文本里，想让引用内容向右缩进，但用position: relative会导致文本截断右侧浮动块，margin-left又好像不起作用。其实问题根源有两个：一是HTML结构不合法，二是错误的缩进方式选择。

问题分析 #

首先，你在<p>标签里嵌套了另一个<p id="quote">，这不符合HTML规范——<p>元素不能包含块级元素（包括其他<p>），浏览器会自动将嵌套的<p>解析成独立的段落，导致布局混乱，这也是margin-left效果不符合预期的原因之一。

其次，position: relative只是视觉上移动元素，但不会改变它的占位空间，所以文本会直接覆盖右侧的浮动块，造成截断。

解决方案 #

步骤1：修复HTML结构 #

把嵌套的<p>换成语义更合适的<blockquote>（或者用<div>），同时确保不要在<p>里嵌套块级元素。调整后的HTML如下：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="left-block"></div>
<div id="right-block"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis?</p>
<blockquote id="quote">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis? Voluptate corrupti excepturi quaerat commodi, aut illo dolorum."</blockquote>
<p>Voluptate corrupti excepturi quaerat commodi, aut illo dolorum.</p>
</body>
</html>

步骤2：用margin-left实现缩进 #

修改CSS，去掉position: relative，改用margin-left设置缩进。这样引用元素会在左右浮动块之间的可用空间内向右移动，内容会自动换行，不会截断右侧浮动块：

#left-block{ 
  height: 150px; 
  width:50px; 
  float: left; 
  background-color: #000; 
  margin-right: 10px 
}
#right-block{ 
  height: 150px; 
  width:50px; 
  float: right; 
  background-color: #000; 
  margin-left: 10px 
}
#quote{ 
  margin-left: 30px; 
  /* 可选：添加右侧缩进，让文本和右侧浮动块保持距离 */
  margin-right: 10px;
}

保留段落包裹结构的替代方案 #

如果必须让引用内容在同一个段落里，可以把<p id="quote">换成<span id="quote">，然后设置display: block让行内元素支持margin：

调整后的HTML：

<div id="left-block"></div>
<div id="right-block"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis? 
  <span id="quote">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis? Voluptate corrupti excepturi quaerat commodi, aut illo dolorum."</span> 
Voluptate corrupti excepturi quaerat commodi, aut illo dolorum.</p>

对应的CSS：

#quote{ 
  display: block; 
  margin-left: 30px;
  margin-right: 10px;
}

这样就能实现和你提到的维基百科页面类似的效果：引用文本向右缩进，同时不会截断右侧的浮动块。

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