头闻号

徐州新星伯乐氏装饰材料有限公司

其他工程承包|装饰建材代理加盟|室内涂料|室外涂料|其他建筑涂料|地坪漆

首页 > 新闻中心 > 科技常识:什么是BFC CSS 使用伪元素清除浮动的方法
科技常识:什么是BFC CSS 使用伪元素清除浮动的方法
发布时间:2023-02-01 10:17:50        浏览次数:3        返回列表

今天小编跟大家讲解下有关什么是BFC CSS 使用伪元素清除浮动的方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关什么是BFC CSS 使用伪元素清除浮动的方法 的相关资料,希望小伙伴们看了有所帮助。

BFC概念:

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

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

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

以下情况会触发BFC:

•<html>根元素•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 使用伪元素清除浮动的方法 希望对大家有所帮助 如果大家有任何疑问欢迎给我留言 小编会及时回复大家的!

来源:爱蒂网