BFC规则以及解决方法

更新日期: 2020-09-26阅读: 1.6k标签: 布局分享

复制链接

新浪微博

QQ 好友

扫一扫分享

一、什么是BFC？

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

二、BFC产生规则

1、根标签(body)

2、float的值不为none

3、overflow的值不为visible

4、display的值为inline-block

5、position的值为absolute或fixed

三、BFC的特性

1、垂直方向排列。（类似块级特性）

2、BFC内部每个内部标签都会与左边界相接触。（类似块级特性）

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

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

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

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

四、可以解决的问题

1、外边距折叠/塌陷：

父子关系在父级加overflow:hidden，兄弟关系给其中一个兄弟设置成独立的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></div>
    <div></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></div>
    <div></div>
    <div></div>
</body>
</html>

3、防止文字环绕

给文字设置成BFC可以解决文字环绕

4、清除浮动

给父级设置成BFC可以清除浮动，浮动的标签也会被计算BFC高度。

链接: https://fly63.com/article/detial/9776