zoukankan      html  css  js  c++  java
  • BFC(块格式化上下文)的理解

    1.什么是BFC(块格式化上下文)?

    是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。

    BFC,块级格式化上下文,一个创建了新的BFC的盒子是独立布局的,盒子里面的子元素的样式不会影响到外面的元素。在同一个 BFC 中的两个毗邻的块级盒在垂直方向(和布局方向有关系)的 margin 会发生折叠。
     
    2.什么时候会创建BFC?
    • float的值不是none,浮动元素 float = left | right 或 inherit(≠ none)

    • position 的值不是static或者relative,绝对定位元素 position = absolute 或 fixed

    • display的值是inline-block,table-cell,flex,table-caption或者inline-flex

    • overflow的值不是visible,overflow = hidden | auto 或 scroll

    3.BFC的特性?

     1.内部的box会在垂直方向,一个接一个地放置

     2.box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

     3.内部每个元素的margin box的左边,与包含块border box的左边相接触,浮动也是如此

     4.BFC的区域不会与float box重叠

     5.BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素

     6.计算BFC的高度时,浮动元素也参与计算

    4.BFC 的作用?

    4.1.包含浮动元素(清除浮动)

    浮动元素会脱离文档流(绝对定位元素也会脱离文档流),导致无法计算准确的高度,这种问题称为高度塌陷。

    解决高度塌陷问题的前提是能够识别并包含浮动元素,也就是清除浮动

    解决方法:在容器(container)中创建 BFC。

    4.2.防止垂直margin重叠

    p {
         color: #f55;
         background: #fcc;
          200px;
         line-height: 100px;
         text-align:center;
         margin: 100px;
    }
    
    <p>Haha</p>
    <p>Hehe</p>

    两个p标签是同一个BFC的内部box,内部相邻的box的margin发生重叠

      .wrap {
        overflow: hidden;
      }
    
      p {
        color: #f55;
        background: #fcc;
         200px;
        line-height: 100px;
        text-align: center;
        margin: 100px;
      }

      <div class='wrap'>
        <p>Haha</p>
      </div>
      <p>Hehe</p>
     
     


  • 相关阅读:
    POJ 题目1145/UVA题目112 Tree Summing(二叉树遍历)
    车牌号
    小程序开发 标题新闻
    小程序开发 轮播
    小程序开发
    App phonegap
    Jquery Cookie操作
    App 添加权限
    App WebView实例化
    Vue 组件化
  • 原文地址:https://www.cnblogs.com/liumcb/p/13713602.html
Copyright © 2011-2022 走看看