B fc 概念:
块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。
我们先 了解 一个名词:BFC(block formatting context),中文为[块级格式化上下文]。
先记住一个原则: 如果一个元素具有BFC,那么内部元素再怎么翻江倒海,翻 云 覆雨,都不会影响外面的元素。所以,BFC元素是不可能发生m arg in重叠的,因为mar gin 重叠会影响外面的元素的;BFC元素也可以用来清除浮动带来的影响,因为如果不清除,子元素浮动则会造成父元素高度塌陷,必然会影响后面元素的布局和定位,这显然有违BFC元素的子元素不会影响外部元素的设定。
以下情况会触发BFC:
•<ht ML >根元素
•float的值不为none
•overflow的值为auto,scroll,hidden
•dis play 的值为table-cell,table-caption和inline--block中的任何一个
•pos IT ion的值不为relative和 stat ic 即 position: absolute/fixed
显然我们在设置overflow值为hidden时使cont ai ner元素具有BFC,那么子元素child浮动便不会带来父元素的高度坍塌影响。
利用 伪类 元素清除浮动:
.clearFix: :after ,.clearFix :: before { display: block; content: ''; clear: both; visibility: hidden; h ei ght: 0; } .clearFix { zoom: 1;}
总结
以上所述是小编给大家介绍的CSS 使用伪元素清除浮动的方法, 希望对大家有所帮助 ,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
总结
以上是 为你收集整理的 什么是BFC? CSS 使用伪元素清除浮动的方法 全部内容,希望文章能够帮你解决 什么是BFC? CSS 使用伪元素清除浮动的方法 所遇到的问题。
如果觉得 网站内容还不错, 推荐好友。
查看更多关于什么是BFC? CSS 使用伪元素清除浮动的方法的详细内容...