你知道BFC吗?一定被问过这个问题吧,写代码时一定用到过,但是你不知道这是BFC.
BFC是什么?
BFC全称块级格式化上下文.BFC是W3C CSS2.1规范中的一个概念,他决定了元素如何对其内容进行定位以及于其他元素的关系和相互作用,当涉及到可视化布局的时候,BFC提供了一个环境,html元素在这个环境中按照一定的规则进行布局.一个环境中的元素不会影响到其他环境中的布局.比如浮动元素会形成BFC,浮动元素内部子元素的主要受该浮动元素的影响,两个浮动元素之间是互不影响的,这点有点类似一个BFC就是一个独立行政单位的意思.可以说BFC就是一个作用范围,把他理解成一个独立容器,并且这个容器里box的布局与这个容器外的box毫不相干.
以上这段是抄的,因为写的挺流畅的,但是其中有不理解的点,比如:两个浮动元素之间是互不影响的,怎么会不影响呢?两个浮动的元素,其中一个变大,领一个的位置肯定会因此而变化啊,应该说是浮动的元素变化,不会影响他的父元素吧.
触发BFC的条件:(也是抄的,但有不懂,希望懂的给解答)
- 根元素或其他包含他的元素(不懂,根元素是说html?意思是html中的元素改变不会影响其他的元素的位置?都是根元素了,肯定没其他兄弟元素了呀,怎么影响?)
- 浮动元素(这个是懂的,也常用)
- 绝对定位元素(absolute/fixed 这个也常用)
- 内联块(元素具有display:inline-block)(试过了,这个能解决垂直外边距重叠的问题,但是里面的元素改变,肯定会影响外面的元素)
- 表格单元格(元素具有display:table-cell,html表格单元格默认属性)(没用过)
- 有overflow 并且值不是visible的块元素(这是overflow:hidden能清除浮动的原因)
- 弹性盒(flex/inline-flex)(不懂)
- display:flow-root(清除浮动的属性,和overflow:hidden使用方式一样,但兼容性还不是很好)
- column-span: all(使垮所有列,这个属性应该和column-count搭配使用,column-count是将一段文字分成几列展示,这个属性还挺好用的,可以在pc上用,在移动端上还是慎用,因为uc和qq浏览器不确定是否支持)了解更多
BFC可以解决的问题
- 垂直外边距重叠问题
- 去除浮动
- 优化性能(比如页面中有一部分动画,会影响其他元素在页面中的位置,此时我们就可以为这部分动画新建一个BFC元素,让动画在这个元素中发生,从而不会引起回流,只会部分重绘)
其实我的理解BFC是一个规范,不仅仅包含一个元素变化不会影响其他元素的布局,还包含内联块实现的外边距重叠问题的解决等等,这也是BFC规范的一部分.我们最常用的还是浮动和定位生成的独立元素不影响其他元素的功能.
