码迷,mamicode.com
首页 > 其他好文 > 详细

BFC 浅谈

时间:2020-01-29 12:39:35      阅读:83      评论:0      收藏:0      [点我收藏+]

标签:display   flex   常用   padding   检测方法   规划   opener   highlight   告诉   

写在前面


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?=>重新规划一个(独立)渲染区域

    • 根元素body,天然是一个BFC
    • overflow:hidden;
    • float 不为none
    • display:inline-block | table-cell |table-caption
    • position:absolute | fixed 只要不为static

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

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
        <style>
    *{padding: 0;margin: 0;}
    .par{
    border: 5px solid #fcc;
    width: 300px;

    /* overflow: hidden; */
    display: inline-block;
    }
    .child{
    border: 5px solid #f66;
    width: 100px;
    height: 100px;
    float: left;
    /* clear: both; */
    }
    </style>
    </head>
    <body>
    <!-- 网页的定位(大) 文档流正常,浮动,定位,flex,table -->
    大专栏  BFC 浅谈ss="tag"><div class="par">
    <div class="child"></div>
    <div class="child"></div>
    </div>
    </body>
    ```
    - 三、每个元素的左边,要与包含盒子的左边相接触
    - 四、BFC的区域不会与float box重叠
    ```html
    <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>
    ```
    ```html
    /*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。
    ```css
    .clearfix:after{
    content:'';
    display:table;
    clear:both
    }
    .clearfix{
    *zoom:1;/* IE6,7不支持BFC,所以需要通过专有的CSS属性,触发hasLayout。*/
    }

关于zoom:1

BFC 浅谈

标签:display   flex   常用   padding   检测方法   规划   opener   highlight   告诉   

原文地址:https://www.cnblogs.com/lijianming180/p/12239946.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!