应届生都会的BFC

• BFC的通俗理解

  • Block Formatting Context(块级格式化上下文)是W3C CSS 2.1规范中的一个概念 它决定了元素如何对其内容进行定位 以及与其它元素的的关系和相互做用 简单来讲 咱们能够把它理解成 咱们在进行盒模型布局的时候 若是一个元素符合成为了BFC的条件 该元素成为一个隔离了独立容器 元素内部元素会垂直的沿着其父元素的边框排列 和外部元素互不影响 好比浮动元素会触发BFC 浮动元素内部的子元素主要受到该浮动元素的影响 而两个浮动元素之间是互不影响的
  • 在CSS3中 BFC叫作Flow Root 在早期的的IE中也有相似的概念haslayout IE6丶7的不少布局产生的bug (如3px的间隙丶绝对定位的继承) 均可以经过触发hasLayout修复 比较推荐的方法为zoom:1和height:1% 不会破坏已有的样式 相信你们对它并不陌生 一样的以往集中在float丶绝对定位丶margin collaspe中的不少困惑 在理解了BFC后 都可以被咱们一一解除

• 触发BFC的方法

  • float元素
  • position absolute fixed
  • display table-cell table-caption inline-block
  • overflow除了visible(hidden auto scroll)
  • fieldset元素
  • 早期的IE的hasLayout会触发一个新的block formatting context

• BFC的特性

  • 边缘不和浮动元素重叠(这个特性颇有用 由于元素触发BFC的话 就不会被float元素覆盖 当子元素彻底浮动的时候也可以正确地包含了)
  • 不存在collapsing margin问题(第二个不会叠加的特性 能够理解为两个处理普通流的盒子 会有margin叠加的问题 是由于他们属于相同的BFC 当它自身建立了新的BFC的时候 这个问题就不存在了)

• BFC的常见应用

  • 经过边缘和不浮动元素重叠的特性 实现两栏结构
  • 清除元素内部的浮动
  • 解决合并外边距的问题

• 代码示例

  • 解决margin塌陷

    *{
        margin: 0;
        padding: 0;
    }
    .wrapper{
        margin-left: 100px;
        margin-top: 100px;
        width: 100px;
        height: 100px;
        background: black;
        
        overflow: hidden;
        /* display: inline-block; */
        /* position: absolute; */
        /* float: left; */
    }
    .content{
        margin-left: 50px;
        margin-top: 50px;
        width: 50px;
        height: 50px;
        background: green;
    }
    
    <div class="wrapper">
        <div class="content"></div>
    </div>
    复制代码

  • 解决margin合并的问题

    .wrapper{
        overflow: hidden;
    }
    .demo1{
        background: red;
        margin-bottom: 100px;
    }
    .demo2{
        background: green;
        margin-top: 100px;
    }
    
    <div class="wrapper">
         <div class="demo1"></div>
    </div>
    <div class="wrapper">
         <div class="demo2"></div>
    </div>
    复制代码

  • 解决元素内部浮动

    *{
        margin: 0;
        padding: 0;
    }
    .box{
        /* 2 建立BFC */
        overflow: hidden;
    
        margin-left: 50px;
        height: 100%;
        background: black;
    }
    .left{
        /* 1 */
        float: left;
    
        width: 200px;
        height: 200px;
        border: 3px solid #000;
        opacity: 0.5;
        background: green;
    }
    .right{
        /* 4 */
        overflow: hidden;
    
        width: 400px;
        min-height: 100px;
        border: 3px solid #000;
        opacity: 0.5;
        background: red;
    }
    .litter{
        /* 3 */
        float: left;
        margin: 10px;
        
        width: 50px;
        height: 50px;
        background: blue;
    }
    
    <div class="box">
        <div class="left"></div>
        <div class="right">
            <div class="litter"></div>
            <div class="litter"></div>
            <div class="litter"></div>
        </div>
    </div>
    复制代码

• 你的点赞是我持续输出的动力 但愿能帮助到你们 互相学习 有任何问题下面留言 必定回复