为何我的sidebar无法填充至父容器border边缘？

问题原因 #

这是CSS默认盒模型（content-box）导致的：.main设置的width:650px仅代表内容区域宽度，3px的边框是额外添加在内容区域外侧的。因此.main的内容区域右侧到容器边框有3px空隙，浮动的.sidebar只能停在内容区域边缘，空隙就露出了父容器的背景色。

解决方法 #

方法1：修改父容器盒模型（推荐） #

给.main添加box-sizing: border-box，让设置的宽高包含边框和内边距，内容区域自动适配，侧边栏自然贴紧边框：

.main {
    position: absolute;
    width: 650px;
    height: 675px;
    top: 50%;
    left: 50%;
    margin-top: -325px;
    margin-left: -350px;
    
    border: 3px dashed #456655;
    background-color: #fff8e5;
    font-family: 'Smalle';
    box-sizing: border-box; /* 新增 */
}

方法2：给侧边栏设置负margin #

直接将.sidebar向右偏移3px，抵消边框宽度：

.sidebar {
    position: relative;
    height: 675px;
    width: 200px;
    float: right;
    background-color: #FEDA6A;
    margin-right: -3px; /* 新增 */
}

方法3：改用Flex布局（更稳定的现代方案） #

放弃浮动，用Flex布局实现侧边栏，布局逻辑更清晰：

.main {
    position: absolute;
    width: 650px;
    height: 675px;
    top: 50%;
    left: 50%;
    margin-top: -325px;
    margin-left: -350px;
    
    border: 3px dashed #456655;
    background-color: #fff8e5;
    font-family: 'Smalle';
    display: flex; /* 新增 */
}

.sidebar {
    width: 200px;
    background-color: #FEDA6A;
    /* 移除float和position:relative */
}

.content {
    flex: 1; /* 让内容区域占满剩余空间 */
    margin-top: 10px;
}

内容的提问来源于stack exchange，提问作者will.jpg