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 网格布局短信发送界面

    <?xml version="1.0" encoding="utf-8"?> <GridLayout xmlns:android=" ...

  2. CodeForces 259A Little Elephant and Chess

     Little Elephant and Chess Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d &am ...

  3. HDU 4870 Rating 概率DP

    Rating Time Limit:5000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Statu ...

  4. Myeclipse 10.7 android(安卓) 开发环境搭建

    1 下载并安装JDK,并且设置环境变量 2 下载安装 installer_r24.3.4-windows.exe (Android SDK Manager) 3 使用 Android SDK Mana ...

  5. Creating HTML table with vertically oriented text as table header 表头文字方向

    AS an old question, this is more like info or reminder about vertical margin or padding in % that ta ...

  6. new的深一步

    new的深一步 new运算符 用于创建对象和条用构造函数 new修饰符 用于隐藏基类中被继承的成员 new约束 用于在泛型声明中约束可能用作类型参数的参数类型 new运算符 用于创建对象和调用构造函数 ...

  7. XML约束——DTD约束

    参考: 方立勋老师的讲课视频.   什么是XML约束 •在XML技术里,可以编写一个文档来约束一个XML文档的书写规范,这称之为XML约束. 为什么需要XML约束 常用的约束技术 •XML DTD • ...

  8. Android获取窗体信息的Util方法

    package com.wangyi.tools; import android.app.Activity; import android.util.DisplayMetrics; public cl ...

  9. 直播未来属于RTMP还是HTTP？

    直播未来属于RTMP还是HTTP? HTTP 传视频比 RTMP 实现起来简单?HTTP 延迟太高? 答:直播通讯未来是属于html5的. 1,协议使用份额 如今国内90%的面向大众的直播平台都是采用 ...

  10. hdu3124Arbiter（最小圆距离-扫描线）

    链接 详解http://blog.sina.com.cn/s/blog_6e7b12310100qnex.html #include <iostream> #include<cstd ...