如何实现CSS块引用与右侧浮动图片同高时不重叠？

核心修改方案 #

调整块引用的布局规则，让它自动避开右侧浮动图片，同时保留原有视觉样式：

.img-float-right {
    float: right;
    margin: 10px 0px 25px 35px !important;
}

.blockquote {
    font-size: 1.4em;
    margin: 30px auto 30px;
    /* 移除固定宽度，改用自适应最大宽度 */
    max-width: calc(100% - 30px);
    /* 触发BFC，自动避开浮动元素 */
    overflow: auto;
    font-family: Open Sans;
    font-style: italic;
    color: #D2B39B;
    padding: 1.2em 30px 1.2em 75px !important;
    border-left: 8px solid #D2B39B;
    line-height: 1.4;
    position: relative;
    background: #f5f5f5;
}

.blockquote::before {
    font-family: Arial;
    content: "\201C";
    color: #D2B39B;
    font-size: 4em;
    position: absolute;
    left: 10px;
    top: -10px;
}

.blockquote::after {
    content: '';
}

关键修改说明 #

• 移除固定宽度width:90%：固定宽度会让块引用无视浮动元素的存在，直接占据指定宽度导致重叠。改用max-width: calc(100% - 30px)，既保留最大宽度限制，又能根据可用空间自动收缩。
• 添加overflow: auto：触发块格式化上下文（BFC），BFC元素会自动识别周围的浮动元素，调整自身宽度以避开浮动内容，不会覆盖图片也不会被挤到下方，自然排列在图片左侧。
• 保留原有视觉样式：字体、边框、伪元素等样式完全保留，确保和之前的设计一致。

备选方案（强制块引用在图片左侧） #

如果希望无论图片高度如何，块引用都固定在左侧，可使用Flex布局（需确保图片和块引用在同一个父容器内）：

/* 给图片和块引用的父容器添加Flex布局 */
.content-wrap {
    display: flex;
    gap: 35px;
    align-items: flex-start;
    margin: 30px 0;
}

.img-float-right {
    float: none; /* 取消浮动 */
    margin: 10px 0 25px 0 !important;
}

.blockquote {
    flex: 1; /* 让块引用占据剩余空间 */
    width: auto;
    margin: 0;
    /* 其他样式保持不变 */
}

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