如何实现带底部边框的行内全宽div，解决右侧下边框不贴合问题

根因说明 #

• 左侧元素设置左浮动后脱离文档流，右侧#right作为普通块级元素，盒子默认会横跨整个父容器，仅内部文本内容会避开浮动元素展示；额外设置width: 100%进一步让右侧盒子宽度和父容器完全一致，部分区域被左侧浮动元素遮挡。
• 内部<p>标签自带浏览器默认的左右外边距，未手动重置导致边框无法贴合容器边界。
• 你设置的margin-left: auto在块级元素未指定宽度时不会生效，也没有起到调整边距的作用。

方案1：修正现有浮动布局 #

仅需要修改CSS部分即可：

#left {
    float: left;
    width: auto;
    background-color: #ff0000;
}

#right {
    /* 去掉width:100%，触发BFC让右侧盒子自动占剩余宽度 */
    overflow: hidden;
    background-color: #00FF00;
}
/* 重置p标签默认边距 */
#right p {
    margin: 0;
    border-bottom: 1px solid black;
}

方案2：使用Flex布局（更稳定，推荐） #

完全避免浮动带来的布局异常，代码更简洁：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .form-wrap {
            display: flex;
        }
        #left {
            background-color: #ff0000;
        }
        #right {
            flex: 1;
            background-color: #00FF00;
        }
        #right p {
            margin: 0;
            border-bottom: 1px solid black;
        }
    </style>
</head>
<body>
<div class="form-wrap">
    <div id="left">
        left
    </div>
    <div id="right">
       <p> right</p>
    </div>
</div>
</body>
</html>

原问题效果截图 #

内容的提问来源于stack exchange，提问作者Dennis Githinji Wakahia