如何开启BFC

根据W3C的标准,在页面中元素都有一个隐含的属性叫做Block Formatting Context,简称BFC,该属性可以设置打开或者关闭,默认是关闭的。

那么BFC有什么作用呢?

当开启元素的BFC以后,元素将会具有如下的特性:

1、父元素的垂直外边距不会和子元素重叠

2、开启BFC的元素不会被浮动元素所覆盖

3、开启BFC的元素可以包含浮动的子元素

 如何开启元素的BFC

1、设置元素浮动 float

2、设置元素绝对定位 position: absolute;

3、设置元素为inline-block

4、将元素的overflow设置为一个非visible的值

 推荐方式:将overflow设置为hidden是副作用最小的开启BFC的方式。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • relative:生成相对定位的元素,通过top,bottom,left,right的位置相对于其正常位置进行定位...
    zx9426阅读 977评论 0 2
  • 1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 何谓浮动元素?有什么特征?所谓浮动...
    草鞋弟阅读 833评论 0 1
  • 什么是BFC BFC全称是Block Formatting Context,即块格式化上下文。它是CSS2.1规范...
    陌客百里阅读 538评论 3 4
  • 转载自(http://web.jobbole.com/83274/) BFC BFC全称是Block Format...
    居客侠阅读 2,164评论 0 20
  • BFC全称是Block Formatting Context,即块格式化上下文。它是CSS2.1规范定义的,关于C...
    xf0128阅读 364评论 0 0