189 8069 5689

css中的BFC有哪些作用

这篇文章将为大家详细讲解有关css中的BFC有哪些作用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

创新互联是一家专业提供梅县企业网站建设,专注与网站建设、成都网站设计、H5高端网站建设、小程序制作等业务。10年已为梅县众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。

什么是BFC(Block Formatting Context)

Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。

而 Block Formatting Contexts (BFC,块级格式化上下文),就是 一个块级元素 的渲染显示规则。具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。

BFC的布局规则如下:
 1. 内部的盒子会在垂直方向,一个个地放置;
 2. BFC是页面上的一个隔离的独立容器;
 3. 属于同一个BFC的 两个相邻Box的 上下margin会发生重叠 ;
 4. 计算BFC的高度时,浮动元素也参与计算
 5. 每个元素的左边,与包含的盒子的左边相接触,即使存在浮动也是如此;
 6. BFC的区域不会与float重叠;

那么如何触发 BFC呢?只要元素满足下面任一条件即可触发 BFC 特性:

  • body 根元素;

  • 浮动元素:float 不为none的属性值;

  • 绝对定位元素:position (absolute、fixed)

  • display为: inline-block、table-cells、flex

  • overflow 除了visible以外的值 (hidden、auto、scroll)

BFC到底有什么用呢?

块格式化上下文对于定位与清除浮动很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。

1、 同一个 BFC 下外边距会发生折叠
也就是说,两个相邻的普通流中的块元素垂直方向上的 margin会折叠。




   
      
  

这里两个p的外边距为100px,而不是200px。之所以发生外边距折叠,是因为他们同属于 body这个根元素

利用BFC可以消除Margin Collapse
BFC导致了margin collapse,而现在又要用它来解决margin cllapse.但是始终要记住一点:只有当元素在同一个BFC中时,垂直方向上的margin才会clollpase.如果它们属于不同的BFC,则不会有margin collapse.因此我们可以再建立一个BFC去阻止margin collpase的发生。

             .wrap {     overflow:hidden;  }  .p {     width:200px;     height:50px;     margin:100px 0;     background-color:red;  }

2、 BFC 可以包含浮动的元素(清除浮动)
正常情况下,浮动的元素会脱离普通文档流,使父元素高度坍塌。即外层的p会无法包含内部浮动的p。


    
    

但如果我们触发外部容器的BFC,根据BFC规范中的第4条:计算BFC的高度时,浮动元素也参与计算,那么外部p容器就可以包裹着浮动元素。


    

3、BFC 可以阻止元素被浮动元素覆盖/(两栏布局)

css中的BFC有哪些作用

大多数情况(若没有特殊设置),第二个元素有部分被浮动元素所覆盖,(但是文本信息不会被浮动元素所覆盖) ,文本将会环绕浮动元素(如Figure 1);但有时候这并不是我们期望的,我们想要的是Figure2。
如果想避免元素被覆盖,可触第二个元素的 BFC 特性,在第二个元素中加入 overflow: hidden

往往可能大家都会选择利用margin-left来强行让p的容器有一个左边距,而距离恰好为Floated p的宽度,但现在我们可以利用BFC更好的解决这个问题。

这个方法可以用来实现两列自适应布局,左边的宽度固定,右边的内容自适应宽度。

关于“css中的BFC有哪些作用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


网站题目:css中的BFC有哪些作用
文章源于:http://cdxtjz.cn/article/gidspd.html

联系我们

您好HELLO!
感谢您来到成都网站建设公司,若您有合作意向,请您为我们留言或使用以下方式联系我们, 我们将尽快给你回复,并为您提供真诚的设计服务,谢谢。
  • 电话:028- 86922220 18980695689
  • 商务合作邮箱:631063699@qq.com
  • 合作QQ: 532337155
  • 成都网站设计地址:成都市青羊区锣锅巷31号五金站写字楼6楼

小谭建站工作室

成都小谭网站建设公司拥有多年以上互联网从业经验的团队,始终保持务实的风格,以"帮助客户成功"为已任,专注于提供对客户有价值的服务。 我们已为众企业及上市公司提供专业的网站建设服务。我们不只是一家网站建设的网络公司;我们对营销、技术、管理都有自己独特见解,小谭建站采取“创意+综合+营销”一体化的方式为您提供更专业的服务!

小谭观点

相对传统的成都网站建设公司而言,小谭是互联网中的网站品牌策划,我们精于企业品牌与互联网相结合的整体战略服务。
我们始终认为,网站必须注入企业基因,真正使网站成为企业vi的一部分,让整个网站品牌策划体系变的深入而持久。