css怎样运用伪元素革除浮动-百分百源码网

css怎样运用伪元素革除浮动

发布时间：09/01 来源：未知浏览：关键词：

什么是BFC？

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

我们先理解一个名词：BFC（block formatting context），中文为“块级格局化上下文”。

先记住一个原则：

假如一个元素具有BFC,那么内部元素再如何排山倒海，出尔反尔，都不会影响外面的元素。所以，BFC元素是不成能发生margin重叠的，由于margin重叠会影响外面的元素的；BFC元素也可以用来清除浮动带来的影响，由于假如不清除，子元素浮动则会造成父元素高度塌陷，必定会影响后面元素的规划和定位，这明显有违BFC元素的子元素不会影响外部元素的设定。

（引荐教程：CSS教程）

以下状况会触发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怎样使用伪元素清除浮动的具体内容，更多请关注百分百源码网其它相关文章！

打赏