zoukankan      html  css  js  c++  java
  • BFC

    规则

    1. 内部的Box会在垂直方向,一个接一个地放置。
    2. 属于同一个BFC的两个相邻Box的margin会发生重叠。
    3. BFC的区域不会与float box重叠。
    4. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素
    5. 计算BFC的高度时,浮动元素也参与计算

    BFC触发原理

    1 根元素
    2 float属性不为none,例如left、right
    3 position为absolute或fixed
    4 display为inline-block, table-cell, table-caption, flex, inline-flex
    5 overflow不为visible,例如hidden、auto

    作用

    1. 清除浮动,BFC里面的浮动元素高度也会参与计算
    <div class="layout">
        <div></div>
         <div></div>
    </div>

    如果里面的两个div为浮动,那么设置 .layout {overflow: hidden}

      2. 防止margin重叠

    总结:

    BFC通俗地说:就是一个容器,里外不相互影响,记住:清除浮动的时候,如果使用 overflow: hidden,是存在缺点的,如果超过了范围,那么则被隐藏了
    清除浮动正确的方式:

    1
    2
    3
    4
    5
    6
    7
    8
    .clearfix:after{
        content: '',
        height: 0;
        display: block;
        visibility: hidden;
        clear: both;
        line-height:0;//行高为0
    }

      

  • 相关阅读:
    [转]MyBatis传入多个参数的问题
    【转】赶集网mysql开发36军规
    C#套接字和windowsAPI套接字
    java中的注解
    java中的枚举类型
    过去的汇编代码
    近日错误集锦
    java swing模仿随机频谱
    java泛型中的对象
    XML-RPC远程方法调用
  • 原文地址:https://www.cnblogs.com/asasas/p/9471239.html
Copyright © 2011-2022 走看看