BFC原理与应用-优快云博客

1.BFC是什么

BFC是块级格式化上下文：
1.BFC规定了元素如何对内容进行定位，以及和其他元素的关系和相互作用
2.BFC提供了一个环境，这个环境中按照一定规则进行布局不会影响其他环境中的布局

2.形成BFC的条件（符合一个就可）

1.float值不是none
2.overflow值不是visible
3.position值是absolute或fixed
4.display值是inline-block, table-cell, table-caption, flex, inline-flex

3.BFC的约束条件

1.内部的Box会在垂直方向上一个接一个的放置
2.同一个BFC的两个相邻Box的margin会发生重叠，与方向无关
3.每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4.BFC的区域不会与float的元素区域重叠
5.计算BFC的高度时，浮动子元素也参与计算
6.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

4. BFC的三个特性，作用

1.BFC会阻止垂直外边距（margin-top、margin-bottom）折叠
2.BFC不会重叠浮动元素
3.BFC可以包含浮动

5.实例

1.BFC会阻止垂直外边距（margin-top、margin-bottom）折叠

#outer {
    background-color: #FF8686;
    width: 100%;
    margin-top: 50px;
}
#outer #inner {
    width: 100px;
    height: 100px;
    margin-top: 50px;
    background-color: #AFD9FD;
}

效果：
这里写图片描述
父元素触发BFC

#outer {
    overflow: hidden;
    background-color: #FF8686;
    width: 100%;
    margin-top: 50px;
}
#outer #inner {
    width: 100px;
    height: 100px;
    margin-top: 50px;
    background-color: #AFD9FD;
}

效果：
这里写图片描述
2.BFC不会重叠浮动元素
3.BFC可以包含浮动

<!doctype>
<html>
    <head>
        <meta charset="utf-8">
    </head>

    <body>
        <div id="main">
            <div id="head">
                this is header,height is 100px
            </div>

            <div id="content">
                <div id="contentLeft">
                    this is left content
                </div>
                <div id="contentRight">
                    this is right content
                </div>
            </div>

            <div id="foot">
                this is footer,height is 100px
                此布局footer自适应，当主文本区或侧边栏不满一页时，footer位于屏幕下端。
                如果主文本区和侧边栏高度超过一页时，footer将在两者之中height最大元素的下方可手动调节侧边栏和主文本区高度查看效果
            </div>

        </div>

        <style type="text/css">
            /*其他样式代码*/
            *{
                margin: 0px;
                font-size: 25px;
                color: white;
                font-family: SimHei;
                text-align: center;
            }
            #head,
            #foot{
                background-color: #7E7E7E;
            }
            #content #contentLeft{
                background-color: #FF8686;
            }
            #content #contentRight{
                background-color: #AFD9FD;
            }

            /**
             * 布局核心代码
             */

            /*实现内容不足一页时，foot固定在底部*/
            /*首先需要设定html的高度为一个页面以方便将一个div（g-ctn）设定为最小大小为浏览器窗口大小*/
             html,body{
                 height: 100%;
             }
             #main{
                 min-height: 100%;
                 position: relative;
             }
             #foot{
                 position: absolute;
                 bottom: 0px;
                 width: 100%;
             }

            #head,
            #foot{
                height: 100px;
            }
            #content{
                /*BFC规则5：计算BFC的高度时，浮动子元素也参与计算，则触发BFC，让浮动元素参与计算/
                /*实现左边内容较高时，content可以计算到长度，让底部自适应*/
                overflow: hidden;
            }
            #content #contentLeft{
                float: left;
                width: 300px;
                height: 500px;
            }
            #content #contentRight{
                height: 600px;
                /*添加原因：BFC规则3：每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
                 * 则虽然存在浮动的元素contentLeft，但contentRight的左边依然会与包含块的左边相接触。
                 * 方法：BFC规则4：需要overflow: hidden，触发contentRight生成BFC
                 * 结果：BFC的区域不会与float的元素区域重叠*/
                overflow: hidden;
            }

        </style>
    </body>
</html>