BFC--margin折叠和清除浮动

zhangfaliang 发布于2019-08-30 13:09 / 560人阅读

摘要：背景以前在写和的时候，两个都设置了不同的上下值。它是决定块盒子的布局及浮动元素相互影响的一个因素。创建根元素绝对定位元素为或的值不为的值为的值不为折叠属于同一个的两个相邻的会发生折那如何阻止折叠呢，只要将其中一个创建新的就行了。

背景

以前在写html和css的时候，两个div都设置了margin不同的上下值。写完后我开心的打开页面，为毛两个应该隔的比较开的div，距离并不是我设置的margin值。于是我从marigin重合搜索到了BFC,于是我blahblah地看了一通，却没有看的很懂，一知半解的我烦躁的放弃了。
最近突然想深入的了解下css，在看了几篇文章后，里面涉及到了我以前的问题，并从css标准和原理上讲解了，配合上例子，有了种豁然开朗的感觉：原来margin会折叠是这个原因！所以想把这种感觉记录下来，也是一份对这部分知道的总结和巩固。

BFC

1. 定义

块级格式化上下文（block formatting context）是页面 CSS 视觉渲染(visual CSS rendering)这个过程中的一个概念。它是决定块盒子的布局及浮动元素相互影响的一个因素。

2. 创建BFC

根元素

绝对定位元素 (position 为 absolute 或 fixed)

float的值不为none

display的值为:inline-block, table-cell, table-captions, flex

overflow的值不为visible

margin折叠

属于同一个BFC的两个相邻Box的margin会发生折

那如何阻止margin折叠呢，只要将其中一个box创建新的BFC就行了。(可以尝试不同创建BFC的方法尝试，代码注释了)

BFC清除浮动

在计算BFC元素高度时，浮动元素的高度也会计算进去，所以可以达到清除浮动的效果(可以将下例尝试不同创建BFC的方法来清除浮动)

结束

第一次写这类总结，如果有什么不对的，希望大家和谐交流。
BFC还有一些其他的布局规则，我只写出了我以前疑惑的点，也感谢我参考的几篇文章，下面是链接，大家有兴趣可以深入研究下。

You Don"t Know CSS
BFC神奇背后的原理
详说BFC

云服务器 GPU云服务器清除浮动收缩折叠展开折叠折叠

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115342.html

BFC到底是啥？

摘要：两个兄弟盒之间的竖直距离由属性决定。即使存在浮动尽管一个盒的行盒可能会因为浮动收缩，这也成立。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。前言在面试中，我们经常会遇到一个常见的面试题，什么是BFC?于是我就去查阅了相关资料： css规范中是这样描述BFC的 9.4.1 块格式化上下文浮动，绝对定位元素，...

jeffrey_up 2019-08-30 15:44 评论0 收藏0
css浮动、BFC、定位问题

摘要：元素框从文档流完全删除，并相对于其包含块定位。产生折叠的必备条件必须是邻接的而根据规范，两个是邻接的必须满足以下条件必须是处于常规文档流非和绝对定位的块级盒子并且处于同一个当中。 1.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响? 何谓浮动元素？有什么特征？所谓浮动元素，即是设置了浮动属性的元素。其特征为： 1.浮动的框可以向左或者向右移动，直到它的外...

Tony 2019-08-29 12:53 评论0 收藏0
前端面试题-BFC(块格式化上下文)

摘要：一的概念规范解释块格式化上下文，是页面的可视化渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。我们可以使用实现清除浮动，这里就不多介绍了，想要了解的可以阅读前端面试题清除浮动。一、BFC 的概念 1.规范解释块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的...

Ryan_Li 2019-08-30 14:06 评论0 收藏0
前端面试题-BFC(块格式化上下文)

摘要：一的概念规范解释块格式化上下文，是页面的可视化渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。我们可以使用实现清除浮动，这里就不多介绍了，想要了解的可以阅读前端面试题清除浮动。一、BFC 的概念 1.规范解释块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的...

layman 2019-08-01 18:41 评论0 收藏0
细说 CSS margin

摘要：给父元素设置了一个灰色背景，并且没有设置高度，因此高度会随着内容而扩展，设置为。这个元素的位置如下图所示因为元素清除了左浮动，所以元素下移。由于这条规则的存在，导致他们折叠后的不能跟的进行折叠，因此的高度被撑开。作者：https://coding.net/u/zhengkenghong原文：https://blog.coding.net/blog/css-margin 本文着重描述关...

tianren124 2019-08-30 12:48 评论0 收藏0