BFC

作者: 取个昵称有那么难吗 | 来源:发表于2019-12-21 21:09 被阅读0次

    1、BFC的概念

    Block Formatting Context,块级格式化上下文。可以理解成一个独立的容器,与外界互不相干,互不打扰。

    2、BFC的特点

    (1)、相邻块级,垂直方向上的边距重叠

    (2)、BFC区域不会与浮动元素重叠(清楚文字环绕)

    (3)、BFC的独立性,里外互不影响

    (4)、BFC块内的浮动元素会参与高度计算(无高度塌陷)

    3、创建BFC的方法

    (1)、设置float不为none

    (2)、设置overflow不为none

    (3)、设置display为inline-block,table-cell,table-caption

    (4)、设置position不为static或者relative

    4、BFC的应用场景

    (1)、清除文字环绕

    (2)、解决外边距重合

    (4)、解决与浮动元素重叠(常见两栏布局,右边自适应,三栏布局中间自适应)

    (5)、解决高度塌陷,即浮动子元素参与高度计算。

    相关文章

      网友评论

          本文标题:BFC

          本文链接:https://www.haomeiwen.com/subject/qyqnnctx.html