老师您好，请问我这里添加了overflow:hidden为什么没有解决高度塌陷的问题

来源：2-3 BFC规范和浏览器差异

程序媛小灯

2020-10-23 20:17:11

这里两个div之间的距离还是20px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BFC规范和浏览器差异</title>
    <style>
        .container {
            width: 306px;
            /* 不设置高度 */
            /* height: 202px; */
            border: 5px solid #000;
            margin: 20px;
            /* 创建BFC的几种方式 */
            overflow: hidden;
            /* display: inline-block; */
            /* float: left; */
        }
        .box {
            float: left;
            background: rgb(212, 97, 97);
            width: 100px;
            height: 200px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <!-- 一个盒子不设置height，当内容子元素都浮动时，无法撑起自身，需要设置形成BFC -->
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

写回答

2回答