BFC规则以及解决方法

路人甲Java 2021-09-09

展开全文

一、什么是BFC？

BFC是页面上的独立渲染区域

二、BFC产生规则

1、根标签(html)

2、float的值不为none

3、overflow的值不为visible

4、display的值为inline-block

5、position的值为absolute或fixed

三、BFC的特性

1、属于同一个BFC的两个块元素，垂直margin兄弟关系会折叠（正数以大值为准，有负数正常加减），父子关系会塌陷。

2、BFC区域不会与float的标签区域重叠。

3、浮动的标签也会被计算BFC高度。

4、BFC是独立容器，内部标签不会影响到外部标签。

四、可以解决的问题

1、外边距折叠/塌陷：

　　父子关系在父级加overflow:hidden，父级加border，父级加高度

　 弟关系给其中一个兄弟设置成独立的BFC。

2、自适应两栏或三栏布局

　　两栏：左边固定高度设置float，右边不设宽设置BFC

<html>
<head>
    <style>
        .left {
            width: 100px;
            height: 400px;
            background: red;
            float: left;
        }
        .right {
            height: 500px;
            background: yellow;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>
</html>

两栏自适应

　　三栏：左右固定高度设置float，中间不设宽设置BFC

<html>
<head>
    <style>
        .left {
            float: left;
            height: 500px;
            width: 150px;
            background: red;
        }
        .center {
            height: 600px;
            background: blue;
            overflow: hidden;
        }
        .right {
            float: right;
            height: 500px;
            width: 150px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="center"></div>
    <div class="mid"></div>
</body>
</html>