Home  >  Article  >  Web Front-end  >  何为BFC_html/css_WEB-ITnose

何为BFC_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:22:301127browse

 BFC 定义
  BFC(Block formatting context)直译为"块级格式化上下⽂文"。它是⼀一个独⽴立的渲染区域,只有Block-level box参 与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
  BFC布局规则:
内部的Box会在垂直⽅方向,⼀一个接⼀一个地放置。 Box垂直⽅方向的距离由margin决定。属于同⼀一个BFC的两个相邻Box的margin会发⽣生重叠 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。 即使存在浮动也是如此。 BFC的区域不会与float box重叠。 BFC就是⻚页⾯面上的⼀一个隔离的独⽴立容器,容器⾥里⾯面的⼦子元素不会影响到外⾯面的元素。反之也如此。 计算BFC的⾼高度时,浮动元素也参与计算
⼆二、哪些元素会⽣生成BFC?
根元素

float属性不为none

position为absolute或fixed

display为inline-block, table-cell, table-caption, flex, inline-flex

overflow不为visible

BFC就是⻚页⾯面上的⼀一个隔离的独⽴立容器,容器⾥里⾯面的⼦子元素不会影响到外⾯面的元素。反之也 如此。

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn