• <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. OO第一次单元总结

    第一次总结性博客 16071070 陈泽寅 2019.3.23 一.第一单元所学总结 首先先来总结一下第一单元我所学到的知识以及所感所悟.第一个单元,是我第一次接触JAVA语言,并且再使用了几次之后, ...

  2. Sass和less的区别是什么？用哪个好

    什么是Sass和Less?       Sass和Less都属于CSS预处理器,那什么是 CSS 预处理器呢?        CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 ...

  3. java篇 之 流程控制语句

    条件判断语句 条件语句: If(boolean类型) {} else {}    (打大括号避免出错) switch (export)语句:export的类型必须是 byte,short,char,i ...

  4. leanote使用本地账户+坚果云同步

    1. 换机器后笔记无法显示 这是因为新建账户与原账户userid不一致. 正确的同步方式为: 下载leanote并解压,不运行,不新建账户 从坚果云同步leanote数据 创建leanote的数据目录 ...

  5. Codeforce Round #555 Div.3 D - N Problems During K Days

    构造题 话说挺水的题..当时怎么就WA到自闭呢.. 先把每个位置按照最低要求填满,也就是相差1..然后从最后一位开始把剩下的数加上,直到不能加为止. #include <bits/stdc++. ...

  6. ubuntu 安装 evpp

    ubuntu 安装 evpp 来源 https://www.cnblogs.com/wisdomyzw/p/9402440.html Ubuntu虚拟机安装开源库evpp说明: EVPP为奇虎360基 ...

  7. 【LOJ#3095】[SNOI2019]字符串（后缀数组）

    [LOJ#3095][SNOI2019]字符串(后缀数组) 题面 LOJ 题解 首先画图看看如何比较两个串的大小,发现这个东西等价于求两个相邻的后缀的\(LCP\). 一个做法是求出\(SA\),然后 ...

  8. github+jekyll个人博客搭建

    Thanks to https://blog.csdn.net/Hanghang_/article/details/78944672 跟着这个博客一步步搭建,从jekyll官网上找到自己喜欢的主题. ...

  9. 如何安装多个mysql 或者如何更改mysql服务名

    此教程适合免安装版本(压缩包)的mysql: 有的时候你需要一台计算机上安装不同的mysql版本,而不同版本的mysql服务名称都是mysql,安装时会有冲突 解决的办法就是安装的时候更改名字 在命令 ...

  10. python之路（6）迭代器和生成器

     目录 迭代器(Iterator) 生成器(Generator) 迭代器 迭代器协议:对象提供一个next方法,执行该方法要么返回下一项,要么引起一个Stopiteration异常 可迭代对象:实现了 ...