概念
BFC——block formatting context(块级格式化上下文)
如何触发BFC
a)float:left | right;
b)overflow:hidden | auto | scroll;
c) display: table-cell | table-caption | inline-block | flex;
d) position: fixed | absolute;
BFC特性
a)浮动的子元素会被父元素计算高度(父级触发了BFC)
b)非浮动元素和浮动元素不会发生覆盖(非浮动元素触发了BFC)
c)子元素设置的margin值不会传递给父级(父级触发了BFC)
d)上下两个元素设置margin不重叠(其中一个元素外层嵌套一个父级,并触发了BFC)
e)内部的box会在垂直方向,一个接一个的放置
BFC作用
a)解决margin重叠问题
b)用于消除浮动(解决高度塌陷问题)
c)实现三栏自适应布局(利用非浮动元素和浮动元素不会相互覆盖的特性)
注:将鼠标指针的形状设置为手的形状
cursor:pointer;
BFC的概念和特性
最新推荐文章于 2024-09-26 17:57:52 发布