一、了解BFC
1、BFC的定义:
对于新手来说,这个解释真是。。。。
2、来个小案例,直观的体会一下吧
一个div里面嵌套了一个子元素,给子元素设置上边距,你以为的效果:
实际效果
从视觉上看,子元素的上边距变成了父元素的上边距,在实际应用时可知,父元素与子元素的左右边距不会合并,而上下边距会合并
为什么浏览器会有这种奇怪的现象呢?这就是W3C制定的规则
3、有没有解决的办法呢?
现在就是运用BFC规则的时候了
BFC块格式上下文,简单来说就是一BFC区域,根据规则,一个BFC区域和另一个BFC区域是相互独立且不会相互影响的,如下案例
给第一个BFC区域的子元素设置上下边距,根据BFC规则它不会影响其他BFC区域,于是会在内部拉开距离,这使得父元素变成独立的BFC区域。
注意:BFC还有一个非常重要的特点,如果元素被触发了BFC规则,浏览器在计算元素高度时,会把浮动元素也考虑进去
二、如何触发BFC规则?
给元素添加以下属性:
总结:
1、BFC是什么?一个浏览器渲染元素的规则(块格式上下文)
规则:各个BFC区域之间相互独立,不会相互影响
2、如何触发元素的BFC规则?
1)元素浮动:float:left/right
2)元素绝对定位: position: absolute/fixed
3)元素类型为inline-block:display: inline-block/tabl-cell等
4)overflow的值不为默认的visible:overflow:hidden/auto等
3、BFC的具体体现:
1)父子元素的上下边距不再合并
2)父元素的高度会将浮动元素计算在内