触发bfc的html元素,什么是bfc？ css 使用伪元素清除浮动的方法 -凯发ag旗舰厅登录网址下载

bfc概念：

块级格式化上下文，是一个独立的渲染区域，让处于 bfc 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

我们先了解一个名词：bfc(block formatting context)，中文为“块级格式化上下文”。

先记住一个原则： 如果一个元素具有bfc,那么内部元素再怎么翻江倒海，翻云覆雨，都不会影响外面的元素。所以，bfc元素是不可能发生margin重叠的，因为margin重叠会影响外面的元素的；bfc元素也可以用来清除浮动带来的影响，因为如果不清除，子元素浮动则会造成父元素高度塌陷，必然会影响后面元素的布局和定位，这显然有违bfc元素的子元素不会影响外部元素的设定。

以下情况会触发bfc:

•根元素

•float的值不为none

•overflow的值为auto，scroll，hidden

•display的值为table-cell，table-caption和inline--block中的任何一个

•position的值不为relative和static 即 position: absolute/fixed

显然我们在设置overflow值为hidden时使container元素具有bfc，那么子元素child浮动便不会带来父元素的高度坍塌影响。

利用伪类元素清除浮动：

.clearfix::after,.clearfix::before {

display: block;

content: '';

clear: both;

visibility: hidden;

height: 0;

}

.clearfix { zoom: 1;}

总结

以上所述是小编给大家介绍的css 使用伪元素清除浮动的方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

总结

以上是凯发ag旗舰厅登录网址下载为你收集整理的触发bfc的html元素,什么是bfc？ css 使用伪元素清除浮动的方法的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。