CSS BFC in depth

BFC (Block Formatting Context)

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

clearfix & clear float

  1. clear: both;

  2. overflow: auto;

margin collapsing

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

margin 合并后, margin 大小的计算方法

++, max +

--, min -

+-, sum

同为正数，取大的正值(正)

Math.max(10px, 20px) = 20px

同为负数，取小的负值(负)

Math.min(-10px, -20px) = -20px

一正一负，取求和后的值(可正可负)

10px + -20px = -10px

BFC 触发条件

CSS box modal

统一使用 box-sizing: border-box;

CSS 盒子模型

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

https://css-tricks.com/the-css-box-model/

IE 盒子模型 的 content 包括 border、padding

refs

CSS margin collapsing All In One

https://www.cnblogs.com/xgqfrms/p/13643081.html

https://www.smashingmagazine.com/2017/12/understanding-css-layout-block-formatting-context/

site:css-tricks.com BFC

https://css-tricks.com/almanac/properties/d/display/

https://css-tricks.com/handling-long-unexpected-content-css/

https://www.cssmojo.com/block-formatting-contexts/

https://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/

https://www.w3cplus.com/css/understanding-css-layout-block-formatting-context.html

https://segmentfault.com/a/1190000013023485

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

CSS BFC in depth的更多相关文章

  1. CSS Modules in depth

    CSS Modules in depth https://github.com/css-modules/css-modules https://webpack.js.org/loaders/css-l ...

  2. 深入理解css BFC 模型

    如果要深入理解css布局的各种原理,要在重构页面做得心应手的话,那么你就必须先理解这玩意 "BFC" , BlockFormatting Context(块级格式化上下文): 这里 ...

  3. CSS BFC(Block Formatting Context)

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

  4. CSS BFC学习笔记

    BFC,全称是Block Formatting Context,块级格式化上下文. 详细是什么,能够理解为页面元素的一种特性.触发了BFC的元素往往会产生一些对刚開始学习的人而言意想不到的效果. 触发 ...

  5. <HTML/CSS>BFC原理剖析

    本文讲了BFC的概念是什么: BFC的约束规则:咋样才能触发生成新的BFC:BFC在布局中的应用:防止margin重叠(塌陷,以最大的为准): 清除内部浮动:自适应两(多)栏布局. 1. BFC是什么 ...

  6. CSS—BFC原理解析与应用

    我们在很多地方都见过BFC这个词,或许能够知道大概意思,但是有时候它的具体原理以及作用会记得很模糊,下面就对BFC这个概念深入学习下. 块级格式化上下文(Block Formatting Contex ...

  7. CSS BFC（格式化上下文）深入理解

    什么是BFC 在解释BFC之前,先说一下文档流.我们常说的文档流其实分为定位流.浮动流和普通流三种.而普通流其实就是指BFC中的FC.FC是formatting context的首字母缩写,直译过来是 ...

  8. CSS——BFC

    http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html 元素若不是bfc,那么内部浮动元素的高度不参与计算 元素若不是bf ...

  9. css BFC布局及用处

    http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html 这篇文章讲的很简单很实用

随机推荐

  1. 当中台遇上DDD，我们该如何设计微服务？ - InfoQ https://www.infoq.cn/article/7QgXyp4Jh3-5Pk6LydWw

    当中台遇上DDD,我们该如何设计微服务? - InfoQ https://www.infoq.cn/article/7QgXyp4Jh3-5Pk6LydWw

  2. Java面向对象（一）----初次见面

    面向对象 面向过程:根据业务逻辑从上到下写代码 函数式编程:对一些功能的代码封装到函数中,日后无需重复编写,直接调用函数就可以了 面向对象:将所有的功能进行封装,面对的事封装了功能的实体(对象),即面 ...

  3. CF460C Present

    写在前面 由于菜,写树状数组写挂了. 于是想出了一种不像线段树或树状数组+二分答案那样显然,但是依旧不难想,复杂度比较优秀,代码难度低的做法. 算法思路 外部二分答案,不多解释,稍证明一下单调性: 若 ...

  4. POJ2961_kmp

    Period Time Limit: 3000MS   Memory Limit: 30000KB   64bit IO Format: %I64d & %I64u Submit Status ...

  5. Flutter GetX使用---简洁的魅力！

    前言 使用Bloc的时候,有一个让我至今为止十分在意的问题,无法真正的跨页面交互!在反复的查阅官方文档后,使用一个全局Bloc的方式,实现了"伪"跨页面交互,详细可查看:flutt ...

  6. Oracle数据库误删除数据恢复(Oracle闪回功能)

    一.启用行移动功能 alter table table_name enable row movement ; 二.可查询之前某一个时间点的数据(默认是1440分钟,即24小时内的数据) select ...

  7. python 中excel表格的操作【转载】

    传说中python操作ms office功能最强大的是win32com,但只能要ms上使用. 不过对于比较简单的需求显得有些小题大作.那么来看下简单的,分别是xlrd和xlwt模块, 不过暂时只支持e ...

  8. 自己动手实现java断点/单步调试（一）

    又是好长时间没有写博客了,今天我们就来谈一下java程序的断点调试.写这篇主题的主要原因是身边的公司或者个人都执着于做apaas平台,简单来说apaas平台就是一个零代码或者低代码的配置平台,通过配置 ...

  9. linux上 用户间发送消息 通信

    联想:scp命令 1.使用write命令,向指定用户发送信息:           用户可以使用write命令给其他在线用户发送消息.格式: $ write zhangsan hello   worl ...

  10. HarmonyOS三方件开发指南（8）——RoundedImage

    [小年答谢,新春送礼]免费抽取1000元京东卡+更多新春好礼~查看详情>>> 目录: 1. RoundedImage组件功能介绍 2. RoundedImage使用方法 3. Rou ...