CSS BFC All In One

CSS BFC All In One

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

refs

---

---

©xgqfrms 2012-2020

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

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---