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. proxy_http_version 1.0 | 1.1

    Module ngx_http_proxy_module http://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_http_ver ...

  2. pull push 监控指标

    Prometheus 原理介绍 - 知乎 https://zhuanlan.zhihu.com/p/70090800 Prometheus由Go语言编写而成,采用Pull方式获取监控信息,并提供了多维 ...

  3. (转载)微软数据挖掘算法:Microsoft 目录篇

    本系列文章主要是涉及内容为微软商业智能(BI)中一系列数据挖掘算法的总结,其中涵盖各个算法的特点.应用场景.准确性验证以及结果预测操作等,所采用的案例数据库为微软的官方数据仓库案例(Adventure ...

  4. oracle创建表并加索引

    一个语句创建Oracle所有表的序列 -- 动态创建序列 2 declare 3 cursor c_job is 4 select TABLE_NAME from user_tables; 5 6 c ...

  5. 消息队列扫盲（RocketMQ 入门）

    消息队列扫盲 消息队列顾名思义就是存放消息的队列,队列我就不解释了,别告诉我你连队列都不知道似啥吧? 所以问题并不是消息队列是什么,而是 消息队列为什么会出现?消息队列能用来干什么?用它来干这些事会带 ...

  6. Web信息收集之搜索引擎-Shodan Hacking

    Web信息收集之搜索引擎-Shodan Hacking 一.Shodan Hacking简介 1.1 ip 1.2 Service/protocol 1.3 Keyword 1.4 Cuuntry 1 ...

  7. IDEA插件及相关使用技巧

    IDEA插件及相关使用技巧 一.插件 图片背景插件background Image Plus 翻译插件Translation CodeGlance右侧显示代码 Grep Console自定义设置控制台 ...

  8. REST架构及其介绍

    概述     REST是英文Representational State Transfer的缩写,中文翻译:表述性状态转移.     他是由Roy Thomas Fielding博士在他的论文 < ...

  9. snmp协议 及snmpwalk

    推荐阅读: snmp及工具:https://www.jianshu.com/p/dc2dc0222940 snmp协议详解:https://blog.csdn.net/shanzhizi/articl ...

  10. OsgEarth开发笔记（一）：Osg3.6.3+OsgEarth3.1+vs2019x64开发环境搭建(上)

    前言   OSG研究之后,做地理GIS显示了地球:<项目实战:Qt+OSG教育学科工具之地理三维星球>,这一文章是基于OSG做的,而基于OsgEarth是可以进一步对地球进行深度操作,所以 ...