热门关键字:
jquery > jquery教程 > html5 > 什么是BFC? CSS 如何使用伪元素清除浮动?

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

957
作者:管理员
发布时间:2020/3/5 11:57:28
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=980

  .BFC概念:

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

  我们先了解一个名词:BFC(blockformattingcontext),中文为“块级格式化上下文”。

  先记住一个原则:如果一个元素具有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
友荐云推荐