• <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. Django（八）上：Model操作和Form操作

    ↑↑↑点上面的”+”号展开目录 Model和Form以及ModelForm简介 Model操作: 创建数据库表结构 操作数据库表 做一部分的验证 Form操作: 数据验证(强大) ModelForm ...

  2. seaborn库

      首先找到Anaconda Prompt命令行,下载seaborn库 ,命令  pip install seaborn 1.风格设置 import seaborn as sns import num ...

  3. python 元组用法

    tup1 = ('physics', 'chemistry', 1997, 2000) 元组中的元素值是不允许修改的 序号 方法及描述 1 cmp(tuple1, tuple2)比较两个元组元素. 2 ...

  4. 报错utf-8错误

    当python运行总报utf-8错误时, f = open('CI_CUSER_2019040116033031.txt')data_app = pd.read_csv(f)print(data_ap ...

  5. BZOJ2300[HAOI2011]防线修建——非旋转treap+凸包(平衡树动态维护凸包)

    题目描述 近来A国和B国的矛盾激化,为了预防不测,A国准备修建一条长长的防线,当然修建防线的话,肯定要把需要保护的城市修在防线内部了.可是A国上层现在还犹豫不决,到底该把哪些城市作为保护对象呢?又由于 ...

  6. P2447 [SDOI2010]外星千足虫 (高斯消元)

    题目 P2447 [SDOI2010]外星千足虫 解析 sol写到自闭,用文字描述描述了半个小时没描述出来,果然还是要好好学语文 用高斯消元求解异或方程组. 因为 \(奇数\bigoplus奇数=偶数 ...

  7. mac查看git路径

    mac查看git路径

  8. 企业级playbook的使用

    一.roles文件存放位置 可以在ansible.cfg配置文件中找到,默认路径如下: 也可以在ansible.cfg文件中自定义修改 二.下面以/usr/share/ansible目录来讲解 ans ...

  9. 01-oracle学习环境配置

    1.安装oracle与SQL Developer oracle10g安装教程 2.创建表空间以及用户 表空间是存储数据文件的容器,由数据文件组成,数据库的所有系统数据和用户数据都必须存储在数据文件中. ...

  10. 03--STL序列容器（Deque）

    一:Deque双端队列<头尾操作> stack和queue是在Deque的基础上改进的,所以先介绍双端队列Deque     deque是“double-ended queue”的缩写,和 ...