摘要：两个兄弟盒之间的竖直由属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直会合并。在一个块格式化上下文中，每个盒的外边挨着包含块的边。即使存在浮动，这也成立。功能一用包住浮动元素。功能二兄弟之间划清界限。
一：什么是BFC?
在W3C规范中，浮动元素和绝对定位元素，非块级盒子的块级容器（例如：inline-block, table-ceils和table-captions）,以及overflow值不为“visiable”的块级元素，都会为他们的内容创建新的BFC，就是block formatting context的缩写(块级格式上下文)。
在一个块级格式上下文中，盒模型在竖直方向一个接一个地放置，从包含块的顶部开始。两个兄弟盒之间的竖直由‘margin’属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并。
在一个块格式化上下文中，每个盒的left外边挨着包含块的left边。即使存在浮动，这也成立。除非该盒建立了一个新的块格式化上下文（这种情况下，该盒自身可能会因为浮动变窄）
总而言之：BFC内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。
二. BFC的功能。功能一：用BFC包住浮动元素。
功能二：兄弟之间划清界限。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115769.html
摘要：在一个中，两个相邻的块级盒子的垂直会产生合并。对于从右到左的格式来说，则触碰到右边缘。正常人类的理解上面个什么瘠薄，看不懂。 BFC是什么? W3C这么说 在W3C规范中的BFC是这样定义的： 浮动元素和绝对定位元素，非块级盒子的块级容器（例如，inline-block、table-cells和table-captions），以及overflow值不为visiable的块级盒子，都会为...
摘要：而不会因为高度塌陷而被隐藏在内部浮动的子元素下。若果不考虑的高度塌陷问题，直接在其弟元素处设置属性即可。开始我误认为了是将中的内容插入至被选元素的弟元素位置上。中的示例从这个示例可以看出，伪类内容的默认方式应该为内联。 1. 引子 前段时间学习 web 布局的时候，因为要用浮动 float 属性，所以就顺理成章地碰到了清除浮动 clear 属性。教学的案例中是用新建一个空的 div ...
摘要：相邻的兄弟元素相邻的两个兄弟元素之间的外边距会塌陷。块级父元素与其第一个最后一个子元素如果块级父元素中，上边框宽度及上内边距距离为时，此时这个块级父元素和其第一个子元素就会发生上外边距合并现象。 盒模型 在CSS中，使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边：外边距边, 边框边, 内填充边 与 内容边。 在标准模式下，一个块的总宽度=...
摘要：相邻的兄弟元素相邻的两个兄弟元素之间的外边距会塌陷。块级父元素与其第一个最后一个子元素如果块级父元素中，上边框宽度及上内边距距离为时，此时这个块级父元素和其第一个子元素就会发生上外边距合并现象。 盒模型 在CSS中，使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边：外边距边, 边框边, 内填充边 与 内容边。 在标准模式下，一个块的总宽度=...
摘要：声明的变量不得改变值，这意味着，一旦声明变量，就必须立即初始化，不能留到以后赋值。 虽然今年没有换工作的打算 但为了跟上时代的脚步 还是忍不住整理了一份最新前端知识点 知识点汇总 1.HTML HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签IE6 bug，和一些定位写法css js放置位置和原因...
阅读 3076·2021-09-22 15:20
阅读 2599·2019-08-30 15:54
阅读 1965·2019-08-30 14:06
阅读 3113·2019-08-30 13:05
阅读 2456·2019-08-29 18:36
阅读 567·2019-08-29 15:10
阅读 522·2019-08-29 11:17
阅读 815·2019-08-28 18:11
