黑马程序员技术交流社区

标题: 【上海校区】谈谈BFC [打印本页]

作者: ljhsnmbb    时间: 2018-5-3 16:54
标题: 【上海校区】谈谈BFC
一、什么是BFC
BFC(block formatting context)简单来说,BFC 就是一种属性,这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。
中文常译为块级格式化上下文。是 W3C CSS 2.1 规范中的一个概念, 从样式上看,具有 BFC 的元素与普通的容器没有什么区别,但是从功能上,具有 BFC 的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器没有的一些特性,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。





如何触发 BFC上面介绍了 BFC 的定义,那么如何触发 BFC 呢?

满足下面任一条件的元素,会触发为 BFC :
1浮动元素,float 除 none 以外的值
2绝对定位元素,position(absolute,fixed)
3display 为以下其中之一的值 inline-blocks,table-cells,table-captions
4overflow 除了 visible 以外的值(hidden,auto,scroll)





FBC布局与普通文档流布局区别      
普通文档流布局规则
1.浮动的元素是不会被父级计算高度
2.非浮动元素会覆盖浮动元素的位置
3.margin会传递给父级
4.两个相邻元素上下margin会重叠

BFC布局规则
1.浮动的元素会被父级计算高度(父级触发了BFC)
2.非浮动元素不会覆盖浮动元素位置(非浮动元素触发了BFC)
3.margin不会传递给父级(父级触发了BFC)
4.两个相邻元素上下margin会重叠(给其中一个元素增加一个父级,然后让他的父级触发BFC)

下面来说一下BFC的实际使用场景
场景1解决子盒子都浮动时 父盒子高度不参与计算问题
<style>
    .far {
        border: 10px solid pink;
        width: 300px;
    }

    .child {
        border: 10px solid yellowgreen;
        width:100px;
        height: 100px;
        float: left;
    }
    .far{
            overflow: hidden;
    }
</style>
<body>
    <div class="far">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

根据overflow 除了 visible 以外的值(hidden,auto,scroll)就会触发BFC的原则 计算BFC高度时 ,floatbox也参与其中


2box垂直方向的距离 会由margin来决定 相邻两个盒子之间margin会重叠 ,这就是margin上下间值合并的原因
<style>
    p {
        color: pink;
        background: #fcc;
        width: 200px;
        height:100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p></p>
    <p></p>
</body>
要解决这个问题我们可以在p外面包裹一层容器,并触发该容器生成一个BFC。那么两个P便不属于同一个BFC,就不会发生margin重叠了,解决代码如下。

<style>
    .box {
        overflow: hidden;
    }
    p {

        background: green;
        width: 200px;
        height: 200px;
        margin: 100px;
    }
</style>
<body>
    <p></p>
    <div class="box">
        <p></p>
    </div>
</body>





3实现左侧固定右侧自适应等类似布局
    <style>

        .out{
            border: 1px solid red;
            height: 200px;
        }
        .left{
            width: 200px;
            height: 150px;
            background-color: green;
            float: left;
        }

        .right{
            background-color: pink;
            height: 250px;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div class="out">
    <div class="left"></div>
    <div class="right"></div>
</div>







作者: 不二晨    时间: 2018-7-16 12:05
奈斯
作者: 吴琼老师    时间: 2018-7-18 15:12

作者: 不二晨    时间: 2018-7-18 15:16
吴琼老师 发表于 2018-7-18 15:12

奈斯,优秀




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2