让前端飞

BFC

2019-04-27  本文已影响1人  Googler

目的

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

如何触发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
上一篇 下一篇

猜你喜欢

热点阅读