BFC相关知识

最新推荐文章于 2024-08-06 18:58:51 发布

紫色的贝壳～

最新推荐文章于 2024-08-06 18:58:51 发布

阅读量94

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/qq_59641085/article/details/119146056

版权

1.BFC的概念

BFC 即 Block Formatting Contexts (块级格式化上下文)，通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

2.BFC的特性及应用

（1）BFC内部的Box会在垂直方向，一个接一个的放置。

（2）Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠（应用：防止marin重叠）

（3）BFC的区域不会与float box发生重叠（应用：自适应两栏布局）

（4）计算BFC的高度时，浮动元素也参与计算（应用：清除内部浮动）

（5）每个元素的margin box的左边会与包含块border box的左边相接触（对于从左到右的格式化，否则相反），即使存在浮动也会如此。

（6）BFC就是页面上的一个独立容器，容器里面的元素不会影响到外面的元素。

3.BFC的触发条件

（1）根元素 html默认就是一个BFC

（2）float的值不为none 单纯的div不是BFC，如果添加了浮动就是BFC

（3）overflow的值不为visible 单纯的div不是BFC，如果添加了overflow：hidden等就是BFC

（4）display的值为 inline-block/ table-cell/ table-caption/ flex/ inline-flex

（5）position的值为absolute或fixed

4.BFC的应用

（1）两栏自适应的两种方法：

方法一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,body{
            height: 100%;
        }
        .left{
            width: 200px;
            height: 100%;
            background: rgb(174, 236, 218);
            float: left;
        }
        .right{
            width: 100%;
            height: 100%;
            background: pink;
        }
        .box{
            height: 100%;
            background: rgb(241, 218, 152);
            margin-left: 200px;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right">
        <div class="box"></div>
    </div>
</body>
</html>

方法二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两栏自适应方法2</title>
    <style>
        html,body{
            height: 100%;
        }
        .left{
            width: 200px;
            height: 100%;
            background: rgb(240, 197, 118);
            float: left;
        }
        .right{
            /* width: 100%; */
            height: 100%;
            background: rgb(148, 211, 236);
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right">
    </div>
</body>
</html>

两栏自适应的效果图如下：

（2）双飞翼格局的两种方法：

方法一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼方法1</title>
    <style>
        .box1,.box2{
            width: 200px;
            height: 500px;
            background-color: aqua;
        }
        .box1{
            float: left;
        }
        .box2{
            float: right;
        }
        .box3{
            height: 500px;
            background-color: chartreuse;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

方法二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼2</title>
    <style>
        .box1,.box2 {
            width: 200px;
            height: 500px;
            background-color: darksalmon;
        }

        .box1 {
            float: left;
        }

        .box2 {
            float: right;
        }

        .box3 {
            height: 500px;
            background-color: indigo;
        }

        .son {
            height: 500px;
            background-color: lemonchiffon;
            margin: 0 200px;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3">
        <div class="son"></div>
    </div>
   
</body>

</html>

双飞翼效果图如下：

紫色的贝壳～

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BFC相关知识

1.BFC的概念 BFC 即 Block Formatting Contexts (块级格式化上下文)，通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。2.BFC的特性及应用（1）BFC内部的Box会在垂直方向，一个接一个的放置。（2）Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠（应用：防止marin重叠）（3）BFC的区域不会与float box发生重叠（应用：自...
复制链接

扫一扫