文章页正文上
本文小编为大家详细介绍“CSS中BFC的作用是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“CSS中BFC的作用是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。
定义
BFC全称为blockformattingcontext,意为块级格式化上下文,是Web页面中盒模型布局的css渲染模式。
可能上面的解释看了有点懵逼,通俗的说BFC指的的是一块区域的布局,这个区域的布局有一个显著特点:这个区域内的子元素无论使用何种布局、何种样式都不会影响外部的元素。BFC比较常见的用法就是用来清除浮动的影响,正常不清楚浮动影响的情况下,父元素的高度是会坍塌的
那么什么时候会触发BFC呢?满足一下条件中任何一个:
float的值不为none
position的值不为static或者relate
displ免费云主机、域名ay的值为table-cell、table-caption、inline-block、flex或者inline-flex中的任意一个
overflow的值不为visible
作用
清除浮动
我们经常会遇到这样的情况:当一个容器内包含的子元素包含浮动元素时,会导致容器没有高度,人们常用一个伪类,然后在伪类中用clear属性清除浮动,其实可以通过定义一个BFC来达到同样的目的,举个例子:
这篇文章主要讲解了“Vue的slot怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue的slot怎么使用”吧! 单个 Slot 在子组件内使用特殊的元素就可以为这个子组件添加一个 slot (插槽),…
文章页内容下