BFC

150 阅读1分钟
  1. BFC里面的box都会以垂直方向排列

  2. 每个元素的左margin box的左边与包含块的border box的左边相接触(对于从左往右的格式,否则相反),即使存在浮动也一样

  3. BFC的区域不会和float Box重叠——两栏自适应布局

  4. 同一个BFC里面中相邻的两个盒子的外边距会重叠(取并集)——避免外边距重叠:给一个盒子的父元素加bfc一个盒子不加/两个盒子分别加不同的BFC父元素

  5. BFC就是一个独立的容器,容器里面的元素不会影响到外面的元素,反之也如此——父元素高度塌陷 注意⚠️,对于第五点,原本浮动元素是应该脱离文档流的,但是BFC中会计算其高度。

BFC区域产生后,就像一个凶猛的恶霸,外部不能挡在他前面(3)

就连别人想在他面前圈占领地也不行(4)

内部的结构也相当牢固,即使子元素叛变(float脱离文档流)之后,自己的身体也不会垮(不会父元素高度塌陷)(5)