css使用伪元素清除浮动的方法介绍

今天小编分享的是关于css使用伪元素清除浮动的方法介绍，可能大家对css中的伪元素并不陌生，或者从来没有了解过css中的伪元素。但是不用担心，今天小编会以最简单的描述来讲解css使用伪元素清除浮动的方法。

成都创新互联公司专业为企业提供云岩网站建设、云岩做网站、云岩网站设计、云岩网站制作等企业网站建设、网页设计与制作、云岩企业网站模板建站服务，10年云岩做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

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使用伪元素清除浮动的方法介绍
本文路径：https://www.cdcxhl.com/article20/iehijo.html

成都网站建设公司_创新互联，为您提供网页设计公司、关键词优化、网站制作、网站设计公司、网站改版、软件开发

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容