关于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重叠的问题 效果如图所示