bfc

当两个元素 垂直相邻 时，如果两个元素分别向同一方向设置了各自的外边距，那么会产生合并，取其中最大正值。 如果其中一个元素是负的呢？ 答案: 正值 - 负值 得 正值 如果两个元素都是负值呢？ 答案：负值 - 负值 得 负值 总结： 1.如果存在负值，会是减法 2.如果是正值，则直接取大值 博主建议：上面的了解一下就行，知道这么一个问题，然后知道怎么解决就行。 解决办法： 只给 一个元素设置外边距 就好了，或者触发 BFC 但不推荐。 为什么触发 BFC 能解决外边距折叠？ 答：因为外边距折叠只会发生在属于同一BFC的块级元素之间。 如果你不知道什么是 BFC , 可以看这篇来自 MDN 的文章 https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context 还有参考文献： https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing https://drafts.csswg.org/css-display/#valdef-display-flow-root 来源： https://www.cnblogs.com/xiaolantian/p/12658885.html

文章目录 万能居中 BFC优化 盒模型哪两种模式？什么区别？如何设置 常用清除浮动的方法，如不清除浮动会怎样？ 删格化的原理 纯css实现三角形 高度不定，宽100%，内一p高不确定，如何实现垂直居中？ 至少两种方式实现自适应搜索 设置一段文字的大小为6px css菊花图 关于em 关于vh, vw Flex布局 overflow原理 实现自适应的正方形: 标准模式和怪异模式 CSS3实现环形进度条 css优先级 万能居中 1.margin: 0 auto;水平 2.text-align: center;水平 3.行高，垂直 4.表格，center,middle；水平垂直 5.display:table-cell；模拟表格， 6.绝对定位，50%减自身宽高 7.绝对定位，上下左右全0，margin:auto 8.绝对定位加相对定位。不需要知道宽高 9.IE6，IE7：给父元素设一个font-size:高度/1.14,vertical-align:middle BFC优化 块格式化上下文, 特性: 使 BFC 内部浮动元素不会到处乱跑； 和浮动元素产生边界。 盒模型哪两种模式？什么区别？如何设置 标准模式: box-sizing: content-box; 宽高不包括内边距和边框 怪异模式: box-sizing: border-box ​ 常用清除浮动的方法，如不清除浮动会怎样？

前端日刊 登录 浅析CSS里的 BFC 和 IFC 2018-01-29 阅读 1794 收藏 3 原链： segmentfault.com 分享到： 前端必备图书《Web安全开发指南 掌握白帽子的Web安全技能 从源头消除安全隐患 打造安全无虞的Web应用》 >> >> 前言 之前一直听到有人提到 CSS里的BFC，正巧在 IFE的练习里遇到了外边距折叠的问题，所以正好弄清楚BFC的机制。 (参考来源 见文末的 Reference) 一 什么是 BFC 和之前所有博文一样，还是先从What的角度开始介绍，由浅入深的理解BFC。 所谓的 Formatting context(格式化上下文), 它是 W3C CSS2.1 规范中的一个概念。 它是页面中的一块渲染区域，并且有一套渲染规则. 它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 而 Block Formatting Contexts (BFC，块级格式化上下文)，就是 一个块级元素 的渲染显示规则。通俗一点讲，可以把 BFC 理解为一个封闭的大箱子，，容器里面的子元素不会影响到外面的元素，反之也如此。 BFC的布局规则如下： 1 内部的盒子会在垂直方向，一个个地放置； 2 BFC是页面上的一个隔离的独立容器； 3 属于同一个BFC的 两个相邻Box的 上下margin会发生重叠 ； 4 计算BFC的高度时

先看一道题目：谈谈你对CSS盒模型的理解，思考应该如何回答... 涉及知识点(层层递进): 基本概念：标准模型+ IE模型(区别) JS如何设置获取盒子模型对应的宽和高 实例题(根据盒模型解释边距重叠) BFC(边距重叠解决方案) 基本概念 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)： 不同部分的说明： margin(外边距) - 清除边框外的区域，外边距是透明的。 border(边框) - 围绕在内边距和内容外的边框。 padding(内边距) - 清除内容周围的区域，内边距是透明的。 content(内容) - 盒子的内容，显示文本和图像。 盒子在标准流中的定位原则： margin控制的是盒子与盒子之间的距离，padding存在于盒子的内部它不涉及与其他盒子之间的关系和相互影响问题，因此要精确控制盒子的位置，就必须对margin有更深入的了解。 （1）行内元素之间的水平margin 当两个行内元素紧邻时，它们之间的距离为第一个元素的右margin加上第二元素的左margin。 （2）块级元素之间的竖直margin

IFC IFC(inline formatting context),即⾏内格式化上下⽂，与之对应的是BFC(block formating context),块格式化上下⽂ 在IFC中，框（boxes）⼀个接⼀个地⽔平排列，起点是包含块的顶部。⽔平⽅向上的margin，border和padding在框之间得到保留。框在垂直⽅向上可以以不同的⽅式对⻬：它们的顶部或底部对⻬，或根据其中⽂字的基线对⻬。包含那些框的⻓⽅形区域， 会形成⼀⾏，叫做⾏框(line box)。 ⼀个⾏框的宽度由包含它的元素的宽度和包含它的元素⾥⾯有没有float元素来决定，⾼度的确定由⾏⾼度计算规则决定。 ⾏框的⾼度⾜以包含他的内部容器，也可能⽐它包含的容器们都⾼（⽐如在基线对⻬的时候），当他包含的内部容器的⾼度⼩于⾏ 框的⾼度时，内部容器的垂直位置由⾃⼰的vertical（默认值是 baseline）这个属性来确定。（这个性质可以⽤来实现垂直居中） eg：<p style="background:silver;width:400px;"> <span style="font-size:50px;border:1px solid yellow;">你好</span><em style="border:1px solid yellow;">我好</em><span style="vertical-align

1. box-sizing: 默认取值content-box，width对应内容区content的宽度。 当box-sizing取值为border-box时，给出padding, border后，width对应的是content的宽度+padding(左右)+border(左右) 2. 元素width的单位为%时，是相对于其父元素width的百分比； * 上下方位的padding，margin单位为%，是相对于包含块的 width 来计算 。 包含块：如果元素的 position是static(默认值)或者relative【这两种属于常规文档流】 , 则包含块的边界计算到最近一个父元素；该元素的display属性必须能够提供类似块级上下文，如：block, inline-block, table-cell, list-item等。默认情况下，width, height, padding, margin的值为百分比时，以父元素的尺寸为依据。 脱离常规文档流： position: absolute 浮动 块级格式化上下文(BFC)： 满足以下条件可以创建自己的BFC position: absolute display: inline-block, table-cell float: 不是none overflow: 不是visible BFC规则： 自动包含浮动的元素

浮动(float)，一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局； 恨，浮动之后遗留下来太多的问题需要解决，特别是IE6-7（以下无特殊说明均指 windows 平台的 IE浏览器）。也许很多人都有这样的疑问， 浮动从何而来？我们为何要清除浮动？清除浮动的原理是什么？ 本文将一步一步地深入剖析其中的奥秘，让浮动使用起来更加得心应手。 一、清除浮动 还是 闭合浮动 （Enclosing float or Clearing float）？ 很多人都已经习惯称之为清除浮动，以前我也一直这么叫着，但是确切地来说是不准确的。我们应该用严谨的态度来对待代码，也能更好地帮助我们理解开头的三个问题。 1）清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none； 2）闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。 两者的区别 请看优雅的 Dem o 通过以上实例发现，其实我们想要达到的效果更确切地说是闭合浮动，而不是单纯的清除浮动，在footer上设置clear：both清除浮动并不能解决warp高度塌陷的问题。 结论：用闭合浮动比清除浮动更加严谨，所以后文中统一称之为：闭合浮动。 二、为何要闭合浮动？ 要解答这个问题，我们得先说说CSS中的定位机制：普通流，浮动，绝对定位 （其中

浮动(float)，一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局； 恨，浮动之后遗留下来太多的问题需要解决，特别是IE6-7（以下无特殊说明均指 windows 平台的 IE浏览器）。也许很多人都有这样的疑问， 浮动从何而来？我们为何要清除浮动？清除浮动的原理是什么？ 本文将一步一步地深入剖析其中的奥秘，让浮动使用起来更加得心应手。 一、清除浮动 还是 闭合浮动 （Enclosing float or Clearing float）？ 很多人都已经习惯称之为清除浮动，以前我也一直这么叫着，但是确切地来说是不准确的。我们应该用严谨的态度来对待代码，也能更好地帮助我们理解开头的三个问题。 1）清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none； 2）闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。 通过以上实例发现，其实我们想要达到的效果更确切地说是闭合浮动，而不是单纯的清除浮动，在footer上设置clear：both清除浮动并不能解决warp高度塌陷的问题。 结论：用闭合浮动比清除浮动更加严谨，所以后文中统一称之为：闭合浮动。 二、为何要清除浮动？ 要解答这个问题，我们得先说说CSS中的定位机制：普通流，浮动，绝对定位 （其中"position:fixed" 是

BFC（block formatting context）:块级格式化上下文 触发BFC： 1.根元素 2.float; 3.overflow:auto,scroll,hidden; 4.display:table-cell、table-caption、inline-block、flex、inline-flex; 5.position:absolute、fixed; 注： 一、没有父级的元素为根元素 二、浮动会触发BFC 三、overflow 属性规定当内容溢出元素框时发生的事情： overflow:hidden;1.子集margin-top把父级一起往下带；2.子级浮动导致高度塌陷，可以自动找回高度；3.子级超出父级容器范围 overflow:scroll;多用于留言板类型 来源： https://www.cnblogs.com/YYouyang/p/7470717.html

IE多数的bug源于hasLayout属性，这个属性在IE8及以后的浏览器中被抛弃 IE7及以下版本不支持BFC 块级格式化上下文BFC# BFC是W3C CSS 2.1 规范中的一个概念，它决定了元素如何 对其内容进行定位 ，以及与 其他元素的关系和相互作用 。当涉及到可视化布局的时候， Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局 。一个环境中的元素不会影响到其它环境中的布局。 也可以说BFC就是一个作用范围。可以把它理解成是一个独立的容器，并且这个容器的里box的布局，与这个容器外的毫不相干。 BFC的规则# 1、在创建了 Block Formatting Context 的元素中，其子元素按文档流一个接一个地放置。 垂直方向上他们的起点是一个包含块的顶部 ，两个相邻的元素之间的 垂直距离 取决于 ‘margin’ 特性。 根据 CSS 2.1 8.3.1 Collapsing margins 第一条，两个*相邻的普通流中的块框*在垂直位置的空白边会发生折叠现象。也就是*处于同一个BFC中的两个垂直窗口的margin会重叠。* 根据 CSS 2.1 8.3.1 Collapsing margins 第三条，*生成 block formatting context 的元素不会和在流中的子元素发生空白边折叠。