什么是bfc? css 使用伪元素清除浮动的方法

  发布时间:2019-07-01 17:06:02   作者:佚名   我要评论

块级格式化上下文,是一个独立的渲染区域,让处于 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 使用伪元素清除浮动的方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

相关文章

  • 详解css 伪元素及content 属性

    本文讲讲述伪元素以及功能强大的contet属性,文章通过实例代码相结合的形式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-09-18
  • css :befor :after 伪元素的巧妙用法

    本篇重点介绍css中的:befor、:after创建的伪元素几种使用场景,如填充文本、作为iconfont、进度线、时间线以及几何图形,感兴趣的朋友一起看看吧
    2018-02-07
  • 利用css3伪元素实现逐渐发光的方格边框

    这篇文章主要给大家介绍了利用css3伪元素实现逐渐发光的方格边框的相关资料,文中给出了详细的示例代码供大家参考学习,对大家具有一定的参考学习价值,需要的朋友们下面来
    2017-05-07
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果

    这篇文章主要介绍了利用css3+伪元素实现鼠标移入时下划线向两边展开效果的相关资料,文中先进行了详细的介绍,方便大家理解,而后给出了完整的实例代码让大家可以参考学习
    2017-04-25
  • css使用placeholder-shown伪类实现输入框浮动文字效果

    这篇文章主要介绍了css使用placeholder-shown伪类实现输入框浮动文字效果,需要的朋友可以参考下
    2019-06-12
  • 轻松搞懂css浮动与清除浮动图文详解

    本文通过图文并茂的形式给大家介绍了css浮动与清除浮动的实例代码,非常不错,具有一定的参考借鉴价值,,需要的朋友可以参考下
    2019-04-29
  • css 如何清除浮动的示例代码

    这篇文章主要介绍了css 如何清除浮动的示例代码,详细的介绍了浮动到底是什么和清理浮动的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看
    2018-11-12
  • css 盒模型 文档流 几种清除浮动的方法实例详解

    这篇文章主要介绍了css 盒模型 文档流 几种清除浮动的方法实例详解,需要的朋友可以参考下
    2018-09-10
  • 深入理解css布局之定位与浮动

    这篇文章主要介绍了css布局之定位与浮动的相关资料,需要的朋友可以参考下
    2018-05-21
  • css清除浮动float的三种方法小结

    使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。本文给大家带来了css清除浮动float的三种方法小结,感兴趣的朋友跟随脚本之家小编一起
    2018-03-13

最新评论