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. JVM 调优 内存调优 CPU 使用调优 锁竞争调优 I/O 调优

    Twitter 工程师谈 JVM 调优 2016年03月24日 10:22:30 wenniuwuren https://blog.csdn.net/wenniuwuren/article/detai ...

  2. 服务之间的调用为啥不直接用 HTTP 而用 RPC？

    什么是 RPC?RPC原理是什么? 什么是 RPC? RPC(Remote Procedure Call)-远程过程调用,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议.比 ...

  3. 【ElasticSearch】 使用AWS云ES服务来分析程序日志

    最近公司系统升级,有些API的调用接口达到了每天10几万的请求量.目前公司里的日志,都是写文本文件中的.为了能够更好的分析这些日志数据,公司采用了AWS 的 ElasticSearch服务来分析日志. ...

  4. lodash的debounce函数的使用

    最新,在react新项目的开发中使用到了lodash类库的debounce方法,就随手梳理了一下此方法的方便之处 未使用debounce之前 如果不考虑使用debounce,那么在用户连续点击的情况之 ...

  5. Docker中运行nginx

    Docker中运行nginx 1.Docker中运行nginx 2.配置文件 2.1 nginx.conf 2.2 default.conf 3.docker的镜像可以挂什么卷 部分内容原文地址: C ...

  6. fedora 20安装vim Transaction check error

    Transaction check error安装时 yum remove vim-minimal 再安装vim ok

  7. UML——关系

     一.宏观导图: 二.细节 1.关联:指的是类与类之间的结构性关系,即整体-部分关系.一般的关联关系中有单向的和双向的. 特殊关联中的,有聚合和组合,其实我更愿意用英文去理解,这些人翻译的让我很恶 ...

  8. codeforces#244（div.2） C

    动漫节一游回来之后一直处于一种意识模糊的状态 看到大家都陆陆续续地过了C心里还是有点着急(自己没思路啊囧) 其实当时就在想该如何找到DFS中的一个环,然后再找到环路上最小的一个值 把所有环路上最小的值 ...

  9. Codeforces Round #540 (Div. 3) D2. Coffee and Coursework (Hard Version) (二分,贪心)

    题意:有\(n\)个数,每次可以选\(k(1\le k\le n)\)个数,并且得到\(a_1+max(0,a_2-1)+max(0,a_3-2)+...+max(0,a_k-k+1)\)的贡献,问最 ...

  10. Educational Codeforces Round 95 (Rated for Div. 2) C. Mortal Kombat Tower (DP)

    题意:你和基友两人从左往右轮流打怪兽,强怪用\(1\)表示,垃圾用\(0\)表示,但基友比较弱,打不过强怪,碰到强怪需要用一次魔法,而你很强,无论什么怪都能乱杀,基友先打,每人每次至少杀一个怪兽,最多 ...