为何右侧div背景色溢出左侧div？如何无左侧背景色解决该问题

问题根源是左侧Div用了float: left，右侧Div作为普通块级元素会默认占据父容器的全部宽度，所以背景色会延伸到左侧浮动元素的下方。以下是几种不用给左侧加背景色的解决办法：

方法1：触发右侧Div的BFC（块级格式化上下文） #

给右侧Div添加overflow: hidden，这样它会自动避开左侧的浮动元素，背景色就不会溢出了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page</title>
    <style>
        #leftdiv{
            float:left;
            width: 20vw;
        }
        #rightdiv{
            background-color: silver;
            overflow: hidden; /* 新增这行 */
        }
    </style>
</head>
<body>
    <div id="leftdiv"> Left Div</div>
    <div id="rightdiv"> Right Div</div>
</body>
</html>

方法2：给右侧Div设置左外边距 #

直接让右侧Div的左外边距等于左侧Div的宽度，手动避开左侧区域：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page</title>
    <style>
        #leftdiv{
            float:left;
            width: 20vw;
        }
        #rightdiv{
            background-color: silver;
            margin-left: 20vw; /* 新增这行，值和左侧宽度一致 */
        }
    </style>
</head>
<body>
    <div id="leftdiv"> Left Div</div>
    <div id="rightdiv"> Right Div</div>
</body>
</html>

方法3：使用Flexbox布局（推荐） #

放弃float，用更现代的Flex布局，直接实现并排且不会有背景溢出问题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page</title>
    <style>
        body{
            display: flex; /* 给父容器（body）设置Flex */
            margin: 0; /* 清除默认边距 */
        }
        #leftdiv{
            width: 20vw;
        }
        #rightdiv{
            background-color: silver;
            flex: 1; /* 让右侧Div占据剩余宽度 */
        }
    </style>
</head>
<body>
    <div id="leftdiv"> Left Div</div>
    <div id="rightdiv"> Right Div</div>
</body>
</html>

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