• <html>根元素；
  • float的值不为none；
  • overflow的值为auto、scroll或hidden；
  • display的值为table-cell、table-caption和inline-block中的任何一个；
  • position的值不为relative和static。

换言之，只要元素符合上面任意一个条件，就无须使用clear:both属性去清除浮动的影响了。因此，不要见到一个<div>元素就加个类似.clearfix的类名，否则只能暴露你孱弱的CSS基本功。

那什么时候会触发BFC呢？块级格式化上下文的更多相关文章

  1. 基础总结（02）--BFC（块级格式化上下文）

    BFC(块级格式化上下文)布局规则 1.元素垂直排列. 2.同一个BFC相邻两个元素的margin会重叠. 3.BFC区域不会与浮动元素重叠. 4.BFC就是页面上的一个隔离的独立容器,容器里面的子元 ...

  2. BFC（块级 格式化上下文）的理解

    本文转载(https://segmentfault.com/a/1190000013647777) 一.BFC的概念 1.规范解释 块格式化上下文(Block Formatting Context,B ...

  3. BFC（块级格式化上下文）

    渲染规则 1.内部的box会在垂直方向,一个接一个的放置 2.box垂直方向的距离由margin决定,属于同一个bfc的两个相邻box的margin会发生重叠 3.每个元素的margin box的左边 ...

  4. css 块级格式化上下文（BFC）

    一.块级格式化上下文(BFC) 1.什么是块级格式化上下文? Block Formatting Contexts (BFC,块级格式化上下文)就是一个块级元素 的渲染显示规则 (可以把 BFC 理解为 ...

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

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

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

    在CSS2.1中,有三种定位方案--普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inline元素水平排列,直到行被占满后换行,block元素则被渲染为完整的一行,除非指定,所有元素 ...

  7. BFC块级格式化上下文简述

    做过页面编写的各位应该对定位不陌生了,这个样式表中的重头戏,也是最难把控的元素之一,今天在这里我们要讲到的就是与浮动与清除浮动相关的定位元素,对于定位有很多种,有绝对定位,还有相对定位,固定定位,静态 ...

  8. css中margin重叠和一些相关概念（包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes ）

    平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外 ...

  9. 详解块级格式化上下文（BFC）

    相信大家和我一样,第一次听到别人说CSS 块级格式化上下文(block formatting context,简称:BFC)的时候一头雾水,为了帮助大家弄清楚块级格式化上下文,我翻阅了W3C的CSS规 ...

  10. BFC块级格式化上下文

    BFC块级格式化上下文 触发条件 overflow 值不为 visible 的块元素 根元素 html 元素 浮动元素(元素的 float 不是 none) 绝对定位元素(元素的 position 为 ...

随机推荐

  1. 4月18日 MySQL学习

    正式开始了数据库的学习 昨天下好的MySQL 今天正式开始学习的,介绍了多种数据库软件,当然 学习的这个是开源的 免费的. DBMS(数据库管理系统)这就是我们学习的数据库的软件 数据库分为关系型数据 ...

  2. Kafka学习笔记-如何保证高可用

    一.术语 1.1 Broker Kafka 集群包含一个或多个服务器,服务器节点称为broker. broker存储topic的数据. 如果某topic有N个partition,集群有N个broker ...

  3. springdata 查询思路:基本的单表查询方法(id,sort) ---->较复杂的单表查询(注解方式,原生sql)--->实现继承类---->复杂的多表联合查询 onetomany

    springdata 查询思路:基本的单表查询方法(id,sort) ---->较复杂的单表查询(注解方式,原生sql)--->实现继承类---->复杂的多表联合查询 onetoma ...

  4. java 中的引用数据类型

    字符串String 在java 中,字符串不是基本数据类型,而是String 类的对象,当我们创建一个字符串的时候,真的是要使用new 来调用String 构造函数 String str = new ...

  5. [LOJ3084][GXOI/GZOI2019]宝牌一大堆——DP

    题目链接: [GXOI/GZOI2019]宝牌一大堆 求最大值容易想到$DP$,但如果将$7$种和牌都考虑进来的话,$DP$状态不好设,我们将比较特殊的七小对和国士无双单独求,其他的进行$DP$. 观 ...

  6. 老年OIer的Python实践记—— Codeforces Round #555 (Div. 3) solution

    对没错下面的代码全部是python 3(除了E的那个multiset) 题目链接:https://codeforces.com/contest/1157 A. Reachable Numbers 按位 ...

  7. 使用 PHP SOAP 来创建一个简单的 Web Service。

    访问: http://www.debug.com/php-soap-demo.php?client=22 结果: apache: <VirtualHost _default_:80> Do ...

  8. openflow packet_out和packet_in分析

    任务目的 1. 掌握OpenFlow交换机发送Packet-in消息过程及其消息格式. 2. 掌握OpenFlow控制器发送Packet-out消息过程及其消息格式. 实验原理 Packet-In 使 ...

  9. <TCP/IP原理> (二) OSI模型和TCP/IP协议族

    1.OSI参考模型 1)作用 2)各层的名称和功能 2.对分层网络协议体系的理解 1)不同节点:层次组成不同,作用不同 2)横向理解:虚通信.对等实体.协议.PDU 3)纵向理解:封装与解封.服务.接 ...

  10. MySQ数据备份

    MySQL备份概述 问题:备份和冗余有什么区别? 备份:能够防止由于机械故障以及人为操作带来的数据丢失,例如将数据库文件保存在了其它地方. 冗余:数据有多份冗余,但不等于备份,只能防止机械故障带来的数 ...