BFC概念是什么，哪些状况会触发BFC

发布时间：2023-08-31 14:17:26 所属栏目：语言来源：

导读：这篇文章主要介绍“BFC概念是什么，哪些情况会触发BFC”的相关知识，下面会通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“BFC概念是什么，哪些情况会触发BFC”文章能

这篇文章主要介绍“BFC概念是什么，哪些情况会触发BFC”的相关知识，下面会通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“BFC概念是什么，哪些情况会触发BFC”文章能帮助大家解决问题。

BFC概念：

　　块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

我们先了解一个名词：BFC（block formatting context），中文为“块级格式化上下文”。

先记住一个原则：如果一个元素具有BFC,那么内部元素再怎么翻江倒海，翻云覆雨，都不会影响外面的元素。所以，BFC元素是不可能发生margin重叠的，因为margin重叠会影响外面的元素的；BFC元素也可以用来清除浮动带来的影响，因为如果不清除，子元素浮动则会造成父元素高度塌陷，必然会影响后面元素的布局和定位，这显然有违BFC元素的子元素不会影响外部元素的设定。

以下情况会触发BFC:

•<html>根元素

•float的值不为none

•overflow的值为auto，scroll，hidden

•display的值为table-cell，table-caption和inline--block中的任何一个

•position的值不为relative和static 即 position: absolute/fixed

显然我们在设置overflow值为hidden时使container元素具有BFC，那么子元素child浮动便不会带来父元素的高度坍塌影响。

利用伪类元素清除浮动：

.clearFix::after,.clearFix::before {

       display: block;

      content: '';

      clear: both;

      visibility: hidden;

      height: 0;

}

.clearFix { zoom: 1;}

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!