每日一题

2021/1/25
1.谈谈对BFC的理解
三种定位方式：
普通文档流：
在普通流中，元素按照其在HTML中的先后位置自上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也就是说普通流中元素的位置由该元素在HTML文档中的位置决定
浮动：
在浮动定位中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。

绝对定位：
在绝对定位中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。

BFC块级格式上下文，BFC会产生一个独立的容器，该容器内部的元素不会在布局上影响到外部的元素，在外部的普通流看来它和其他普通流元素无差别

常见产生bfc元素：
float属性不为none；
position属性为absolute或fixed；
overflow属性不为visible；
行内块元素：display：line-block；
常⽤表格元素默认display属性
⽹格元素：display属性为grid或inline-grid元素 等等脱离⽂档流的操作

作用：
①清除浮动；
浮动导致高度塌陷：浮动元素会脱离普通文档流，导致外部元素的高度计算不包括浮动元素本身高度，形成高度塌陷。

解决方案：
I.使container成为也成为bfc（此处使用overflow:hidden’）,BFC的高度计算包含其内部的浮动元素，从而达到清除浮动效果

II.使用clear

②解决外边距折叠问题；
父子元素折叠

解决方案：
父元素成为Bfc，消除外边距折叠问题

兄弟元素折叠

解决方案：
使用两个bfc包裹box

③实现左图右文效果；

给右边的div变成BFC则不会覆盖左边内容

我是小刘
happy everyday~~~