为什么会有BFC？BFC是什么？如何触发？BFC解决了什么问题？

前端程序员在布局页面时，经常会遇到各种烦人的小问题，比如：每个元素都是一个盒子，盒子外的父元素应该不会受到盒内子的子元素影响，可是事实是这样的吗？

往往，我们会看到子元素浮动后，父元素高度没有了，两栏布局时右侧没有自适应，垂直方向上上下两个元素外边距不太对

从常理上来说，被包含在父元素里的元素是不会影响到父元素旁边的元素，但实际上并不总是如此，那么有没有什么办法能让里面的元素和外部真正隔离开呢？解决办法就是：BFC

BFC = Block Formatting context 意思是“块级格式化上下文”，W3C的解释是：它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用，当涉及到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。

其实，我们只要记住：BFC的目的就是：形成一个完全独立的空间，让空间中的子元素不会影响到外面的布局。如何才能形成这样一个神奇的空间呢？我们通过CSS为元素设置一些属性，就能触发，常用的有四种：

float不为none
postion不为relative和static
overflow为auto scroll和hidden
display的值为inline-block

在知道触发规则之后，我们再来看下能解决什么问题呢？

解决浮动元素令父元素高度塌陷的问题
如，父元素div包含几个子div，这几个子元素都为浮动时，父元素高度坍塌，这是因为浮动的子元素脱离了文档流，漂浮于父元素之上，父元素检测不到子元素的存在，获取不到子元素高度，所以看起来父元素没有高度了。父元素后面的布局也就乱了，这时，可以给父元素添加属性overflow：hidden，当然，这只是一种BFC的做法，还可以display: table-cell;或position: fixed;或position: absolute;

触发了BFC的容器就是页面上的一个完全隔离开的容器，容器里的子元素绝对不会影响到外面的元素，为了保证这个规则，触发了BFC的父元素在计算高度时，不得不让浮动的子元素也参与进来，变相的实现了清楚内部浮动的目的。

但有的时候出于布局需要也可能无法给父元素设置这些属性，解决高度坍塌还有让父元素也浮动起来，或添加一个高度，但这种适用于已知道子元素高度

解决自适应布局的问题
PC端的网页，左右两栏布局很常见，一般左侧定宽，右侧主体页面宽度自适应变化，通常是用浮动来实现的；它利用了块级元素占满一行的特性，使得右边的元素可以随着页面宽度的变化而变化，又利用了浮动的特性，让左侧元素覆盖在右侧元素上方，同时还能挤开下方元素的内容，让页面看起来是两栏的效果，但随着右边元素的增加，超出了左边元素的高度后，文字就会环绕左侧元素，这显然不是我们想要的效果，因为右侧元素触发了BFC，触发BFC的容器就是页面上的一个完全隔离开的容器，容器中的子元素绝对不会影响到外面的元素，为了保证这个规则，触发了BFC的右侧元素为了将内部元素和左侧浮动元素隔离开，不得不形成这样左右完全隔离的两栏，同时，如果右侧元素依旧是块级元素，那么他尽可能占满一行的特性还在，这样就保证了右侧元素依旧是自适应的
解决外边距垂直方向重合问题

垂直方向上两个兄弟元素外边距会取最大值，而不是取和，那么我们可以通过触发BFC来防止他们之间相互影响。为其中一个元素的外边包裹一层父元素，并且触发父元素BFC，比如：overflow：hidden，这样打破原有格局，就不再会重叠啦！
另外我们可以用padding来代替marging，有点是简单易懂，缺点是如果根据设计本来就需要设置padding样式，那就没办法用了

总结一下，触发BFC可以解决：

浮动元素的父元素高度塌陷
两栏自适应布局
外边距垂直方向重合

为什么会有BFC？BFC是什么？如何触发？BFC解决了什么问题？相关推荐

触发bfc的html元素,什么是BFC？ CSS 使用伪元素清除浮动的方法
BFC概念: 块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响. 我们先了解一个名词:BFC(block formatting co ...
浅谈对BFC的认识，以及用bfc解决浮动问题
我们在前端的学习过程中常常会遇到BFC,用BFC来解决一些margin塌陷.margin合并清理浮动流的问题那么问题来了,我们所说的BFC到底是个什么东西呢: 什么是BFC BFC(Block Fo ...
什么是BFC？如何触发BFC
什么是BFC? BFC(Block formattin context), 直译:"块级格式化上下文".在页面上形成一个隔离的独立容器,容器里面的子元素不会影响外面的元素.反之亦是 ...
什么是BFC机制，如何触发BFC（消除浮动带来的父元素塌陷、垂直方向margin重叠、嵌套块级元素父元素margin塌陷）
BFC机制 BFC(Block Formatting Context):块格式化上下文 BFC是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其余元素的关系和相互 ...
什么是BFC，如何触发BFC,BFC的作用
BFC:块级格式化上下文理解:BFC属于普通流,相当于一块独立的渲染区域,BFC看成是元素的一种属性, 当元素拥有了BFC属性后,这个元素就可以看做成隔离了的独立容器.容器内的元素不会影响容器外的元 ...
BFC是什么？如何触发？BFC解决了什么问题？
1.BFC是指什么? BFC = Block Formatting context 意思是块格式化上下文,BFC 是指浏览器中创建了一个独立的渲染区域,该区域内所有元素无论如何布局,都不会影响到区域外 ...
margin 塌陷bug 触发bfc
1.bfc block format context 2.如何触发一个盒子的bfc position:absolute; display: inline-block float:left/right; ...
CSS 7 CSS 层叠规则 BFC 和 IFC 机制
CSS 文章目录 CSS 7 CSS 层叠规则 BFC 和 IFC 机制 7.1 BFC 7.1.1 常见的定位方案 7.1.2 BFC 理解 7.1.3 如何触发BFC [如何为元素添加BFC] 7 ...
CSS面试高频题之什么是BFC
之前一段时间因为各种各样的事情一直都没有时间来写博客,但是因为要保证月更原创的量也是只能翻出前几年压箱底的Java学习笔记了 ==|,当然笔者的博客还是以记录前端开发方面的知识为主的. 如题,笔者近期 ...

为什么会有BFC？BFC是什么？如何触发？BFC解决了什么问题？

总结一下，触发BFC可以解决：

为什么会有BFC？BFC是什么？如何触发？BFC解决了什么问题？相关推荐

最新文章

热门文章