css使用伪元素清除浮动的方法介绍
今天小编分享的是关于css使用伪元素清除浮动的方法介绍,可能大家对css中的伪元素并不陌生,或者从来没有了解过css中的伪元素。但是不用担心,今天小编会以最简单的描述来讲解css使用伪元素清除浮动的方法。
成都创新互联公司专业为企业提供云岩网站建设、云岩做网站、云岩网站设计、云岩网站制作等企业网站建设、网页设计与制作、云岩企业网站模板建站服务,10年云岩做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
什么是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使用伪元素清除浮动的方法介绍做了简略的介绍,当然详细使用上面的不同还得要大家自己使用过才领会。如果想了解更多,欢迎关注创新互联行业资讯频道哦!
本文题目:css使用伪元素清除浮动的方法介绍
本文链接:http://myzitong.com/article/iehijo.html