标题底部边框未随文本避开目录(ToC)，如何修复？

问题分析 #

你用浮动实现的目录（ToC）脱离了正常文档流，导致文章里的标题（h4、h5）作为块级元素默认宽度占满父容器，底部边框会延伸到目录下方；而普通文本会自动绕开浮动元素，从而出现边框与文本表现不一致的情况。

修复方法 #

方法一：用Flex布局替代浮动（推荐，更易维护） #

浮动是较旧的布局方式，容易引发这类兼容问题。改用Flex布局可轻松实现目录与正文并排，且标题边框会自动适配正文区域：

1. 修改CSS，移除目录的浮动样式，给article添加Flex布局规则：

h3.articletitle {
    font-weight: bold;
    font-size: 30px;
    border-bottom: 1px solid #4F120B;
}

h4.articlesubtitle {
    font-weight: bold;
    font-size: 22px;
    border-bottom: 1px solid #4F120B;
}

h5.articlesubtitle {
    font-weight: bold;
    font-size: 18px;
    border-bottom: 1px solid #4F120B;
}

#toc_container {
    background: rgba(92, 9, 0, 0.14);
    border: 1px solid #4F120B;
    font-size: 90%;
    margin-right: 1em;
    padding: 20px;
    /* 给目录设置固定宽度，避免被压缩 */
    width: 280px;
    flex-shrink: 0;
}

/* 给父容器添加Flex布局 */
article {
    display: flex;
    gap: 1em;
}

/* 让正文区域自动填充剩余空间 */
.article-content {
    flex: 1;
}

2. 修改HTML，将正文内容（p、h4、h5等）放入新的div.article-content容器，与目录并列：

<div class="book">
<h3 class="articletitle">Title</h3>
<article>
<div id="toc_container">
<p class="toc_title">Contents</p>
<ul class="toc_list">
<li><a href="#Scociety">Scociety</a>
    <ul>
    <li><a href="#ArtHistory">Art</a></li>
    <li><a href="#PopCulture">Pop Culture</a></li>
    <li><a href="#HighCulture">High Culture</a></li>
    <li><a href="#CommunicationAndTheSpreadOfIdeas">Communication And The Spread Of Ideas</a></li>
    <li><a href="#Holidays">Holidays</a></li>
    <li><a href="#GenderAndGenderRoles">Gender and Gender Roles</a></li>
    <li><a href="#SubculturesAndAlternativeLifestyles">Subcultures and Alternative Lifestyles</a></li>
    <li><a href="#UniversalFears">Universal Fears</a></li>
    </ul>
</li>
</ul>
</div>
<!-- 新增正文容器 -->
<div class="article-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h4 class="articlesubtitle" id="Scociety">Scociety</h4>
<h5 class="articlesubtitle" id="ArtHistory">Art</h5>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</div>
</article>
</div>

设置完成后，目录与正文会并排显示，标题边框仅在正文区域延伸，不会侵入目录下方，且窗口缩放时可自动适配。

方法二：保留浮动，将标题设为行内块元素 #

若不想调整整体布局，可让标题变成行内块元素，使其宽度自适应文本，边框也会跟随文本范围：

h4.articlesubtitle, h5.articlesubtitle {
    font-weight: bold;
    border-bottom: 1px solid #4F120B;
    /* 添加该行，让标题宽度适配文本 */
    display: inline-block;
}

h4.articlesubtitle {
    font-size: 22px;
}

h5.articlesubtitle {
    font-size: 18px;
}

该方法的缺点是标题无法自动占满正文区域宽度，若需要标题铺满正文宽度，仍推荐使用Flex布局。

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