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

时间 2019-12-11

标签什么 bfc css 如何使用元素清除浮动栏目 CSS 繁體版

原文原文链接

.BFC概念：html

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

咱们先了解一个名词：BFC（block formatting context），中文为“块级格式化上下文”。spa

先记住一个原则：若是一个元素具备BFC,那么内部元素再怎么翻江倒海，翻云覆雨，都不会影响外面的元素。因此，BFC元素是不可能发生margin重叠的，由于margin重叠会影响外面的元素的；BFC元素也能够用来清除浮动带来的影响，由于若是不清除，子元素浮动则会形成父元素高度塌陷，必然会影响后面元素的布局和定位，这显然有违BFC元素的子元素不会影响外部元素的设定。orm

如下状况会触发BFC:
•<html>根元素
•float的值不为none
•overflow的值为auto，scroll，hidden
•display的值为table-cell，table-caption和inline--block中的任何一个
•position的值不为relative和static 即 position: absolute/fixedhtm

显然咱们在设置overflow值为hidden时使container元素具备BFC，那么子元素child浮动便不会带来父元素的高度坍塌影响。blog

利用伪类元素清除浮动：it

.clearFix::after,.clearFix::before {

      display: block; 

      content: '';

      clear: both; 

      visibility: hidden;

      height: 0; 

}

.clearFix { zoom: 1;}