BFC是什么创建BFC

最新推荐文章于 2022-11-17 00:14:54 发布

至_臻

最新推荐文章于 2022-11-17 00:14:54 发布

阅读量242

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/weixin_57163112/article/details/117705965

版权

前端专栏收录该内容

50 篇文章 2 订阅

订阅专栏

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素

满足这几个条件就能创建BFC

1、float的值不是none。

2、position的值不是static或者relative。

3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex

4、overflow的值不是visible

列如：

<!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>Document</title>
</head>
<style>
    body{
        margin: 0;
    }
    .box{
        width: 200px;
        height: 200px;
        background-color: aqua;
        float: left;
    }
    .two{
        height: 300px;
        background-color: #0f0f;
            /* 创建BFC */
        /* overflow: hidden; */
        /* float: left; */
        /* display: flex; */
        /* display: inline-block; */
        /* position: absolute; */
        /* display: table-caption; */
        display: inline-flex;

    }
</style>
<body>
    <div class="box"></div>
    <div class="two"></div>
</body>
</html>

至_臻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
BFC是什么创建BFC

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素满足这几个条件就能创建BFC1、float的值不是none。 2、position的值不是static或者relative。 3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex 4、overflow的值不是visible...
复制链接

扫一扫