为了账号安全,请及时绑定邮箱和手机立即绑定

BFC理解

标签:
Html/CSS

Block formatting context (块级格式化上下文)

页面文档由块block构成 每个block在页面上占据自己的位置
使用新的元素构建BFC overflow:hidden | auto | scroll; 只要不为visible新的空间
告诉浏览器,外面的环境影响不到我了 我重新来进行Block formatting 布局和定位

核心:  
新的BFC,给出了新的不受外界影响的块级格式化环境
block 块级-> 页面的基础
formatting context 格式化-> 渲染

浏览器构建文档树的时候 布局和定位元素

网页的定位(大) 文档流正常,浮动,定位,flex,table
广义的定位 块级元素的定位 垂直的定位;行内元素 左右定位 通过内容来确定
狭义的定位:
float 浮动元素,在一行的开始或者结束
flex 弹性布局
position

BFC 在正常的文档流里面重建一个新的上下文环境

BFC的约束规则

  • 一、在浏览器进行页面元素布局的时候 同一个BFC的两个相邻的Box的margin 会重叠,与方向无关

    破坏规则 创建新的BFC Context上下文的概念

    如何创建BFC?=>重新规划一个(独立)渲染区域

    好像只剩块级元素和行内元素不是BFC

    • 根元素body,天然是一个BFC

    • overflow:hidden;

    • float 不为none

    • display:inline-block | table-cell |table-caption

    • position:absolute | fixed 只要不为static

  • 二、BFC的高度,浮动元素也要参与计算

    在元素float之后脱离了文档流没有办法计算确切高度,这种情况我们称之为高度塌陷。解决高度塌陷的前提就是能识别并包含到浮动元素。BFC就有这个特性,所以BFC也可以计算浮动元素的高度。新建BFC让浮动元素也参与计算

    <style>
        *{padding: 0;margin: 0;}        .par{            border: 5px solid #fcc;            width: 300px;            /*这里的overflow并不是为了超出则隐藏,而是为了创建一个BFC*/
            /* overflow: hidden; */
            display: inline-block;
        }        .child{            border: 5px solid #f66;  
            width: 100px;            height: 100px;            float: left;            /* clear: both; */
        }    </style></head><body>
    <!-- 网页的定位(大) 文档流正常,浮动,定位,flex,table -->
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div></body>
  • 三、每个元素的左边,要与包含盒子的左边相接触

  • 四、BFC的区域不会与float box重叠

    <style>
        *{padding: 0;margin: 0;}        .aside{            float: left;            width: 100px;            height: 150px;            background-color: #ff6666;
        }        .main{            height: 200px;            background: #ffcccc;            /* clear: left; */
            overflow: hidden;
        }    </style></head><body>
    <!-- 自适应两栏式布局 类似于flex:1;
    aside 和 main 处于同一BFC(body)下 
    BFC布局规则3 规则4 -->
    <div class="aside"></div>
    <div class="main"></div></body>
/*BFC在三栏式布局中的应用*/    <style>
        *{padding: 0;margin: 0;}        .container{            height: 200px;
        }        .left,.right,.center{            height: 200px;
        }        .left{            background: pink;            float: left;            width: 180px;
        }        .right{            background: lightblue;            width: 180px;            float: right;
        }        .center{            background: yellow;            overflow: hidden;
        }    </style></head><body>
    <!-- 三栏式布局 -->
    <div class="container">
        <!-- 页面的结构与呈现效果不一致?想一下 -->
        <div class="left">Left</div>
        <div class="right">Right</div>
        <div class="center">Center</div>
    </div></body>

注意:

通过 overflow:hidden将元素转换为BFC,固然可以解决高度塌陷的问题,但是大范围的应用在布局上是肯定是行不通的,毕竟overflow会造成溢出隐藏的问题,特别是与JS交互的效果时。

那有没有一个更好的高度检测方法呢?
答案是有的,就是我们经常用到的clearfix。

.clearfix:after{    content:'';    display:table;    clear:both
}.clearfix{
    *zoom:1;/* IE6,7不支持BFC,所以需要通过专有的CSS属性,触发hasLayout。*/}



作者:青衣诶_
链接:https://www.jianshu.com/p/822c7071e984


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消