从零开始学习前端开发 — 18、BFC

一、 BFC的概念

BFC——block formating context的缩写,中文译为"块级格式化上下文"

二、如何触发BFC

1.设置float除none以外的值(left,right)

2.设置overflow除visible以外的值(hidden,auto,scroll)

3.设置display属性(table,table-cell,inline-block,flex)

4.设置position属性(fixed,absolute)

三、BFC的作用

1.可以解决上下margin重叠问题

可以给其中一个元素在外层嵌套一个父容器,并设置overflow:hidden;这样为里面的元素创建了一个块级格式化上下文

2.可以解决高度塌陷问题

父元素高度自适应,子元素浮动脱离文档流,不占据父元素空间,导致父元素高度为0,此时给父元素设置overflow:hidden,闭合浮动,触发了BFC

3.可以实现多栏布局

两个浮动元素相邻,另外一个元素设置overflow:hidden;触发了BFC

原文地址:https://www.cnblogs.com/witkeydu/p/8277779.html