关于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的布局规则
- box会在垂直方向上，连续的放置
- Box垂直方向上的距离有他的margin决定，但是同在BFC中的box 会出现重叠的现象
- 每个元素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。是其他的一些值(hidden,auto,scroll)
- 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重叠的问题 效果如图所示