我们在页面布局的时候,经常出现以下情况:
原因是元素之间相互的影响,导致了意料之外的情况,这里就涉及到BFC
概念
BFC
(Block Formatting Context),即块级格式化上下文,它是页面中的一块渲染区域,并且有一套属于自己的渲染规则:
BFC
目的是形成一个相对于外界完全独立的空间,让内部的子元素不会影响到外部的元素
触发BFC
的条件包含不限于:
利用BFC
的特性,我们将BFC
应用在以下场景:
<style> p { color: #f55; background: #fcc; width: 200px; line-height: 100px; text-align:center; margin: 100px; } </style> <body> <p>Haha</p > <p>Hehe</p > </body>
页面显示如下:
两个p
元素之间的距离为100px
,发生了margin
重叠(塌陷),以最大的为准,如果第一个P的margin
为80的话,两个P之间的距离还是100,以最大的为准。
前面讲到,同一个BFC
的俩个相邻的盒子的margin
会发生重叠
可以在p
外面包裹一层容器,并触发这个容器生成一个BFC
,那么两个p
就不属于同一个BFC
,则不会出现margin
重叠
<style> .wrap { overflow: hidden;// 新的BFC } p { color: #f55; background: #fcc; width: 200px; line-height: 100px; text-align:center; margin: 100px; } </style> <body> <p>Haha</p > <div class="wrap"> <p>Hehe</p > </div> </body>
这时候,边距则不会重叠:
<style> .par { border: 5px solid #fcc; width: 300px; } .child { border: 5px solid #f66; width:100px; height: 100px; float: left; } </style> <body> <div class="par"> <div class="child"></div> <div class="child"></div> </div> </body>
页面显示如下:
而BFC
在计算高度时,浮动元素也会参与,所以我们可以触发.par
元素生成BFC
,则内部浮动元素计算高度时候也会计算
.par { overflow: hidden; }
实现效果如下:
这里举个两栏的布局
<style> body { width: 300px; position: relative; } .aside { width: 100px; height: 150px; float: left; background: #f66; } .main { height: 200px; background: #fcc; } </style> <body> <div class="aside"></div> <div class="main"></div> </body>
效果图如下:
前面讲到,每个元素的左外边距与包含块的左边界相接触
因此,虽然.aslide
为浮动元素,但是main
的左边依然会与包含块的左边相接触
而BFC
的区域不会与浮动盒子重叠
所以我们可以通过触发main
生成BFC
,以此适应两栏布局
.main { overflow: hidden; }
这时候,新的BFC
不会与浮动的.aside
元素重叠。因此会根据包含块的宽度,和.aside
的宽度,自动变窄
效果如下:
可以看到上面几个案例,都体现了BFC
实际就是页面一个独立的容器,里面的子元素不影响外面的元素
本文作者:毛超颖
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!