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

2、触发条件

根元素 float属性不为none

position为absolute或fixed

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

overflow不为visible

3、应用场景

自适应两栏布局

  1. <style>
  2.     body {
  3.         width: 300px;
  4.         position: relative;
  5.     }
  6.  
  7.     .aside {
  8.         width: 100px;
  9.         height: 150px;
  10.         float: left;
  11.         background: #f66;
  12.     }
  13.  
  14.     .main {
  15.         height: 200px;
  16.         background: #fcc;
  17.     }
  18. </style>
  19. <body>
  20.     <div class="aside"></div>
  21.     <div class="main"></div>
  22. </body>

清除浮动

  1. <style>
  2.     .par {
  3.         border: 5px solid #fcc;
  4.         width: 300px;
  5.         overflow:hidden;
  6.     }
  7.  
  8.     .child {
  9.         border: 5px solid #f66;
  10.         width:100px;
  11.         height: 100px;
  12.         float: left;
  13.     }
  14. </style>
  15. <body>
  16.     <div class="par">
  17.         <div class="child"></div>
  18.         <div class="child"></div>
  19.     </div>
  20. </body>

防止垂直 margin 重叠

  1. <style>
  2.     p {
  3.         color: #f55;
  4.         background: #fcc;
  5.         width: 200px;
  6.         line-height: 100px;
  7.         text-align:center;
  8.         margin: 100px;
  9.     }
  10. </style>
  11. <body>
  12.     <p>Haha</p>
  13.     <p>Hehe</p>
  14. </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. K.O. ----- 配置文件没有提示

    ---------------siwuxie095 K.O. ----- 配置文件没有提示 1.解决方法一:联网 只要 PC 联网,配置文件中就有提示 2.解决方法二:手动导入约束文件 约束文件:hi ...

  2. Cocoapods 版本升级

    和往常一样使用 Cocoapods ,执行命令: $ pod install #输出信息 /System/Library/Frameworks/Ruby.framework/Versions/2.0/ ...

  3. 让tomcat自动定位到项目

    在servelt.xml中添加粗体部分. <Host name="localhost" appBase="webapps" unpackWARs=&quo ...

  4. 346. Moving Average from Data Stream数据窗口流中位数的数据结构设计

    ［抄题］: Given a stream of integers and a window size, calculate the moving average of all integers in ...

  5. Python使用signal模块实现定时执行

    在liunx系统中要想每隔一分钟执行一个命令,最普遍的方法就是crontab了,如果不想使用crontab,经同事指点在程序中可以用定时器实现这种功能,于是就开始摸索了,发现需要一些信号的知识... ...

  6. 巧用渐变色打造精致移动端APP

    渐变色是指某个物体的颜色从明到暗,或由深转浅,或是从一个色彩缓慢过渡到另一个色彩,充满变幻无穷的神秘浪漫气息的颜色.在扁平化设计刚刚兴起时,渐变是设计师们避之不及的设计手法.然而自从Instagram ...

  7. 利用crosstool-ng自动化编译交叉编译环境(转)

    原文地址:http://www.bootc.net/archives/2012/05/26/how-to-build-a-cross-compiler-for-your-raspberry-pi/ A ...

  8. [GO]runtime包及gosched的使用

    Gosched:让出CPU时间片 Goexit:退出当前的协程 GOMAXPROCS:设置使用最大的CPU数量(哇,牛逼了...) package main import ( "fmt&qu ...

  9. java调用linux管道信息的误区

    String cmd = "ps -ef | grep "XXX" " 使用Runtime rt = Runtime.getRuntime();类时 rt.ex ...

  10. .NET基础 （05）内存管理和垃圾回收

    内存管理和垃圾回收1 简述.NET中堆栈和堆的特点和差异2 执行string abc="aaa"+"bbb"+"ccc"共分配了多少内存3 ...