BFC

作者: Googler | 来源:发表于2019-04-27 13:55 被阅读1次

    目的

    形成一个完全独立的空间,让空间里的子元素不会影响到外面的布局

    如何触发BFC

    1.根元素或其它包含它的元素
    2.浮动元素(元素的float不是none)
    3.绝对定位元素(元素具有position为absolute或fixed)
    4.内联块(元素具有display:inline-block)
    5.表格单元格(元素具有display:table-cell,HTML表格单元格默认属性)
    6.表格标题(元素具有display:table-caption,HTML表格标题默认属性)
    7.具有overflow且值不是visible的块元素
    8.display:flow-root
    9.column-span:all
    

    BFC可以解决的问题

    1.解决浮动元素令父元素高度塌陷问题
    2.解决外边距垂直方向重合问题
    
    Googler.jpg

    相关文章

      网友评论

        本文标题:BFC

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