关于BFC的一些心得

关于BFC的一些心得

一、知识点总结

(1)

基本概念

块级元素：是那种被格式化后可视化的元素
元素变为块级元素的display属性大概有以下常用的几种：“block” “list-item” “table”
margin padding border content 分别定义了元素的四种边，每种边会定义个盒子 分别是 margin box paddingbox borderbox contentbox
而决定块元素的垂直间距的便是这个margin-box ， 这个盒子即使值为0，那么他也是存在的
1.在BFC中margin-box会与相邻的maragin-box相折叠

(2)BFC的布局规则

1. box会在垂直方向上，连续的放置
2. Box垂直方向上的距离有他的margin决定，但是同在BFC中的box 会出现重叠的现象
3. 每个元素margin box的左边，与包含块border box 的左边相接触，浮动也不会例外
4. BFC的区域不会与这个float box 重叠
5. BFC就是这个页面上的一个隔离的独立容器，容器里的元素不会影响外边的元素
6. 在计算BFC的高度时，浮动元素也会参与计算。

可以生成BFC的元素

1. 根元素
2. float元素部位none
3. position的值为：absolute和fixed
4. display的值：inline-block,table-cell,table-caption,flex,inline-flex.
5. overflow部位visible。是其他的一些值(hidden,auto,scroll)
6. filedset元素.

BFC的一些应用

BFC就是这个页面上的一个隔离的独立容器，容器里的元素不会影响外边的元素
(1)自适应两栏布局

每个元素的margin box的左边，与包含border box的左边相接触,即使浮动也会如此

但是BFC的区域不会与float box重叠 元的代码如图所示

当overflow属性不为none的时候将会生成BFC，结果如图所示

清除元素内部的浮动

在我们计算BFC的高度时，浮动的元素也会参与计算
当我们对parent进行清除浮动的时候，我们可以触发这个父元素生成BFC，那么在计算这个高度的同事，内部的浮动元素也会参与计算
清除浮动前

清除浮动后，如图所示

（3）防止垂直的margin的重叠

这两个P元素之间的距离时100px，发生了margin重叠，如图所示

Box垂直方向上的距离有他的margin决定，但是同在BFC中的box 会出现重叠的现象
遇见margin重叠的情况，可以给P元素加一个容器，触发这个BFC，那么他们不在同一个BFC中，这样margin重叠的问题就解决了

这样两个P元素的边距就会正常了不会出现margin重叠的问题 效果如图所示