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