BFC，格式化上下文

最新推荐文章于 2022-04-15 20:59:59 发布

青天魔王

最新推荐文章于 2022-04-15 20:59:59 发布

阅读量92

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/leixu1027/article/details/102583997

版权

web前端专栏收录该内容

36 篇文章 0 订阅

订阅专栏

BFC，格式化上下文，防止父元素高度坍塌，文档流的丢失

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            width: 400px;
            padding: 10px;
            border: 1px solid slateblue;
            overflow: hidden;
        }
        .floatLeft{
            float: left;
            width: 200px;
            height: 50px;
            background: salmon;
        }
        .div2{
            background: slategray;
            overflow: hidden;
        }
    </style>
</head>
<body>

<div class="div1">
    <div class="floatLeft">
        11111111
    </div>
    <div class="div2">
        2222222
    </div>
</div>
</body>
</html>