1、概念，全称是block format context，块级格式化上下文

2、触发条件

根元素 float属性不为none

position为absolute或fixed

display为inline-block, table-cell, table-caption, flex, inline-flex

overflow不为visible

3、应用场景

自适应两栏布局

<style>

    body {

        width: 300px;

        position: relative;

    }

    .aside {

        width: 100px;

        height: 150px;

        float: left;

        background: #f66;

    }

    .main {

        height: 200px;

        background: #fcc;

    }

</style>

<body>

    <div class="aside"></div>

    <div class="main"></div>

</body>

清除浮动

<style>

    .par {

        border: 5px solid #fcc;

        width: 300px;

        overflow:hidden;

    }

    .child {

        border: 5px solid #f66;

        width:100px;

        height: 100px;

        float: left;

    }

</style>

<body>

    <div class="par">

        <div class="child"></div>

        <div class="child"></div>

    </div>

</body>

防止垂直 margin 重叠

<style>

    p {

        color: #f55;

        background: #fcc;

        width: 200px;

        line-height: 100px;

        text-align:center;

        margin: 100px;

    }

</style>

<body>

    <p>Haha</p>

    <p>Hehe</p>

</body>

BFC概念和作用，触发条件的更多相关文章

  1. BFC的布局规则以及触发条件

          1   .BFC的含义 :          Block Formatting Contexts(BFC)                                      块级元 ...

  2. BFC的布局规则和触发条件

    1   .BFC的含义 :          Block Formatting Contexts(BFC)                                      块级元素格式化上下 ...

  3. hasLayout与BFC的触发条件

    hasLayout与BFC是分别在IE和其他浏览器上的两个作用很相近的概念,在很多时候,我们需要触发它们去实现有些效果.例如清除浮动时需要触发hasLayout与BFC:很多自适应的两栏和三栏布局(两 ...

  4. 浅析BFC布局的概念以及作用

    BFC的概念以及作用 BFC的定义: (Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域,只有Block-level box参与 ...

  5. Linux用户抢占和内核抢占详解(概念, 实现和触发时机)--Linux进程的管理与调度(二十）

    1 非抢占式和可抢占式内核 为了简化问题,我使用嵌入式实时系统uC/OS作为例子 首先要指出的是,uC/OS只有内核态,没有用户态,这和Linux不一样 多任务系统中, 内核负责管理各个任务, 或者说 ...

  6. BFC概念及应用

    定义 块级格式化上下文   特性 1.内部box在垂直方向,一个接一个放置 2.box垂直方向的间距由margin决定    属于同一个BFC的相邻box的margin会发生重叠(外边距重叠)    ...

  7. Nginx 502错误触发条件与解决办法汇总(转载)

    一些运行在Nginx上的网站有时候会出现“502 Bad Gateway”错误,有些时候甚至频繁的出现.有些站长是在刚刚转移到Nginx之后就出现了这个问题,所以经常会怀疑这是不是Nginx的问题,但 ...

  8. PO BO VO DTO POJO DAO 概念及其作用

    PO BO VO DTO POJO DAO 概念及其作用(附转换图) 博客分类: java javadaovopojobo        J2EE开发中大量的专业缩略语很是让人迷惑, 特别是对于刚毕业 ...

  9. 10、网页制作Dreamweaver（扩展：各浏览器对 onunload 事件的支持与触发条件实现有差异）

    标准参考 在 HTML 4.01 规范中关于 onunload 事件的描述是:当 document 从 window 中移除时,触发 onunload 事件. 关于 HTML 4.01 规范中 onu ...

随机推荐

  1. XHTML的规范化

    -------------------siwuxie095                                 XHTML 简介         1.什么是 XHTML?     XHTM ...

  2. 天云CloudStack 改进版

    整体风格   创建区域

  3. CentOS搭建VSFTP服务器

    一.安装vsftpd 1.查看是否已经安装vsftpd 2.如果没有,就安装 3.测试是否安装成功 4.安装成功设置开机启动 二.配置vsftpd 1.修改配置文件/etc/vsftpd/vsftpd ...

  4. python 类变量 在多线程下的共享与释放问题-乾颐堂

    最近被多线程给坑了下,没意识到类变量在多线程下是共享的,还有一个就是没意识到 内存释放问题,导致越累越大 1.python 类变量 在多线程情况 下的 是共享的 2.python 类变量 在多线程情况 ...

  5. HDU 4514 湫湫系列故事――设计风景线 (树形DP)

    题意:略. 析:首先先判环,如果有环直接输出,用并查集就好,如果没有环,那么就是一棵树,然后最长的就是树的直径,这个题注意少开内存,容易超内存, 还有用C++交用的少一些,我用G++交的卡在32764 ...

  6. 设计模式16：Mediator 中介者模式（行为型模式）

    Mediator 中介者模式(行为型模式) 依赖关系的转化 动机(Motivation) 在软件构建过程中,经常出现多个对象互相关联交互的情况,对象之间经常会维持一种复杂的应用关系,如果遇到一些需求的 ...

  7. CodeForces 907E Party(bfs+状压DP)

    Arseny likes to organize parties and invite people to it. However, not only friends come to his part ...

  8. Python 数据分析—第八章 画图

    一.matplotlib的用法 折线图+一些常用的设置 #显示中文 import matplotlib as mpl mpl.rcParams['font.sans-serif'] = [u'SimH ...

  9. Delphi xe5如何使用Bluestacks模拟器（用真机或者用猩猩，夜神模拟器，自带的不好用）

    首先,关于这个模拟器问题比较纠结,这是一个关于adb的问题. Delphi XE5会自动识别模拟器和真机,但是你必须先打开模拟器在打开Delphi IDE(Delphi开发环境),否则还得麻烦一会儿. ...

  10. Ray tracing performance benchmark

    accel. avg size 3.14accel. avg depth 16.15accel. max size 8accel. max depth 20accel. GPIT 3.00 MB tr ...