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. Ubuntu Server 12.04 LTS搭建SVN服务及修改端口

    采用了apache结合svn的方式. 首先安装apache.subversion.svn-apache sudo apt-get install apache2 sudo apt-get instal ...

  2. Oracle VM VirtualBox 部署CS devcloud2 开发环境

    Setting up (VirtualBox) 1. Get the new DevCloud 2.0 virtual appliance. The new image was created usi ...

  3. spring4-2-bean配置-6-使用外部属性文件

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAk0AAAFGCAIAAAD4tzxRAAAgAElEQVR4nO2d27HsOm+tOxWn4CeXAm ...

  4. SSH2免密码登录OpenSSH

    OpenSSH免密码登录SSH2http://blog.csdn.net/aquester/article/details/23836245 两个SSH2间免密码登录http://blog.csdn. ...

  5. 设计模式13：Template Method 模板方法模式（行为型模式）

    Template Method 模板方法模式(行为型模式) 变与不变 变化——是软件永恒的主题,如何管理变化带来的复杂性?设计模式的艺术性和复杂度就在于如何分析,并发现体系中的变化点和稳定点,并使用特 ...

  6. 汇编中的移位指令（8086CPU）

    原创 8086CPU中有8条移位指令,分为两大类. 非循环移位指令: SAL —— 算术左移 —— 最高位移入标志状态位CF SAR —— 算术右移 —— 最低位移入CF,最高位不变. 比如说:将10 ...

  7. 阿里云ECS搭建开源跳板机jumpserver无法获取验证邮件的问题及解决办法

    这段时间自己在阿里云上搭建了jumpserver3.0,在安装过程中需要输入邮箱smtp地址,输入之后会有一封验证邮件的,但是在阿里云ECS服务器上却无法收到邮件.查阅了阿里云官方的说明: 为什么无法 ...

  8. Android-主题

    主题分为两种: 第一种:使用Android系统提供的主题    第二种:自己定义主题 样式 与 主题 区分理解 样式是控制(View的子类风格)控件风格 或者 是(ViewGroup的子类风格)布局风 ...

  9. ArcGIS应用——使用Python为图斑连续编号及扩展应用

    为图斑连续编号 在GIS应用中,为图斑连续编号(编号递增)是一项常见的需求,利用ArcGIS,可以方便的实现. Python脚本如下: rec=0 def autoIncrement(): globa ...

  10. Spreadsheet 常用属性

    标题栏是否可见 Spreadsheet1.TitleBar.Visible=true 标题栏背景颜色 Spreadsheet1.TitleBar.Interior.Color="Green& ...