block formatting context(块级格式化上下文)

如何产生BFC：当一个HTML元素满足下面条件的任何一点，都可以产生Block
Formatting Context：

  • float的值不为none。
  • overflow的值不为visible。
  • display的值为table-cell, table-caption, inline-block中的任何一个。
  • position的值不为relative和static。

要清除一个块级元素范围内的浮动，也就是让这个块级元素成为一个新的独立的BFC，可以采取上面的方法，例如使这个块级元素的overflow:hidden

css--block formatting context的更多相关文章

  1. css Block formatting context BFC

    w3c关于BFC解释: http://www.w3.org/TR/CSS21/visuren.html#block-formatting Mdn描述: A block formatting conte ...

  2. CSS BFC(Block Formatting Context)

    BFC是 W3C CSS 2.1 规范中的一个概念Block Formatting Context的缩写即格式化上下文,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.简单讲,它是提 ...

  3. Block formatting context(块级格式化上下文)

    今天看到豆瓣面试官的一篇文章,讲到关于CSS中的一个知识点:Block formatting context  ,感觉这个确实挺有用,同时我也挺赞同作者的一些观点的,这里就不展开谈我的感受了, 此文只 ...

  4. 【转】关于Block Formatting Context－－BFC和IE的hasLayout

    转自穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为“块级格式化范围”. 是 W3C CSS ...

  5. 块级格式化上下文(block formatting context)、浮动和绝对定位的工作原理详解

    CSS的可视化格式模型中具有一个非常重要地位的概念——定位方案.定位方案用以控制元素的布局,在CSS2.1中,有三种定位方案——普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inli ...

  6. 浅入“Block Formatting Context”

    本文主要是针对BFC特性的应用,至于什么是BFC,可以参看MDN的简介: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_fo ...

  7. 关于Block Formatting Context－－BFC和IE的hasLayout

    转文请标明 --- 出处:穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为"块级格式 ...

  8. Block formatting context

    不会JS中的OOP,你也太菜了吧!(第一篇)   一.你必须知道的 1) 字面量 2) 原型 3) 原型链 4) 构造函数 5) 稳妥对象(没有公共属性,而且其方法也不引用this的对象.稳妥对象适合 ...

  9. 什么是BFC（Block Formatting Context）

    原文:https://segmentfault.com/a/1190000012221820 https://www.w3.org/TR/CSS2/visuren.html#block-formatt ...

  10. BFC (Block formatting context)

     一:BFC 是什么      MDN解释: A block formatting context is a part of a visual CSS rendering of a Web page. ...

随机推荐

  1. 我的android学习经历20

    WebView的使用 WebView既可以和Intent一样实现界面跳转一样,让系统浏览器打开页面,也可以在应用程序中打开页面 注意用WebView时,需要注册网络服务 代码如下: package c ...

  2. Android 基础

    1. 安卓的平台构建 例如我的手机 内核版本就是ubuntu  为手机硬件提供各种驱动. 架构的简单理解: Application(应用程序层) 我们一般说的应用层的开发就是在这个层次上进行的,当然包 ...

  3. [翻译]投影变换 Projection Transform (Direct3D 9)

    你可以认为投影变换就是控制摄像机内部的一种方式.他可以类推为为摄像机选择一个漏字板.它是三种变换中最难懂的.本文只讨论以下的一些内容. 典型的投影变换就是缩放和透视投影.投影就变换把视椎转化为一个立方 ...

  4. Windows控制台程序“选定模式”的问题

    最近用Nodejs写了个代理程序,一直用的好好的,木有问题,今天突然发现不能用了,使用telnet去连代理的端口也能连通,可是服务就是不能正常使用,提示连接超时. 当时猜测是Nodejs的某个地方阻塞 ...

  5. Linux安装配置JDK

    如果想看Windows下的安装,请访问此链接: http://www.cnblogs.com/yoyotl/p/5101321.html 1. 去官网下载Linux版本的jdk安装包,(我下载的是ta ...

  6. [SAP ABAP开发技术总结]列表屏幕

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  7. C#打印条码的几种方式

    标题虽然是说C#,但是以下介绍的几种方法不是只能在C#中使用,在其它的语言里面也行. 总结一下常见的条码打印方法,其实打条码的方式很多,大概有以下几种: 1.斑马打印软件制作好模板,保存为.prn格式 ...

  8. CSharp Similarities and Differences

    This document lists some basic differences between Nemerle and C# in a terse form. If you know Java ...

  9. Eclipse使用Jetty（转）

    eclipse 与 jetty 结合的最佳实践 http://www.cnblogs.com/mignet/archive/2011/12/04/eclipse_jetty_perfect_integ ...

  10. eclipse 安装git

    1.安装Git 首先安装Git.这里只讲Windows环境下安装Git方法. 从Git下载git的Windows安装文件,一路Next到选择安装组件这一步: 选上Git Bash Here这一项,这样 ...