什么是BFC? CSS 如何使用伪元素清除浮动?

正版图书 Head First 设计模式(中文版) headfirst设计模式深入浅出讲清 java设计模式计算机编程零基础入门教程 【在售价】41.90 元 ----------------- 【立即下单】复制$eaaXcbZbXdA$打开手机淘宝立即下单

.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;}

  

 

栏目
文章分类
榴芒一刻榴莲泡泡网红大福零食雪媚娘日本糯米糍榴莲麻薯甜品糕点 【在售价】138.00 元 【券后价】88.00元 ----------------- 【立即领券】复制$MYw6cZGNPHS$打开手机淘宝领券并下单