BFC是什么!听起来好高端……
Everybody 大家好,BFC在布局中的作用很大,而且也是经常会用到的。so,让我们一起来深入了解一下BFC吧~
首先要举个栗子~
HTML代码
CSS代码
效果~
这里的p标签并没有添加样式,但如果这样
看看效果
红色没了???div不见了?
一定是浮动惹的祸!
没错,我们来说说浮动在这里干了什么坏事!
作为子元素的p标签因为添加了浮动便导致了父元素的塌陷!原来float这么坏!
让我们想想浮动还有什么罪行!
1、导致父元素的背景图不能显示!
2、父元素边框撑不开!
3、父子级间的padding、margin不能正确展现!
儿子上天了爸爸还能管不了!当然有办法治!于是就有了清除浮动
与其说是清除浮动,不如说是解决浮动出现的问题。so我们来看看父亲治理儿子上天的若干种办法~
1、父元素中添加 overflow:hidden; 你不是上天了吗,爸爸限制着你~(父级紧贴内容)
2、父元素中添加 float:; 爸爸带你一起飞……
3、父元素中添加 position:absolute / fixed; 让父元素也脱离文档流
4、父元素中添加 display:inline-block / table / table-cell; 包起来
5、兄弟元素中添加 clear:both; 找个人来管管你
诶诶诶,我们不是来了解BFC呢,怎么对付开浮动了!
其实以上解决办法都触发了BFC。
ok,引入定理:
什么是BFC?
块级格式化上下文(Block formatting context)是CSS对于一个页面进行可视化渲染时产生的区域,在这个区域中会产生被渲染的盒子模型、以及相互影响的浮动元素。
简单来说,就是BFC就是一种属性,只有块级元素参与,影响着元素的定位,以及兄弟元素之间的相互影响。
嗯,恍然大悟。
不过值得一提的是以上几种触发BFC的效果并不相同,在使用时也要结合实际需求。
嘻嘻,我弄明白了,你呢?