BFC
年前，正巧一次面试中被问到涉及到 BFC 概念，当然偶回答：不知道。但其实大家平时的开发中，却时刻在利用 BFC 特性在处理样式问题。
下面来看下：
BFC 又称 Block Formatting Context （块状格式化上下文）
MDN 解释：
A block formatting context is a part of a visual CSS rendering of a web page. It’s the region in which the layout of block boxes occurs and in which floats interact with other elements.
好吧，偶看了这段解释也是似懂非懂。
大概意思是：BFC 是 CSS 渲染页面环节中的一部分。在块级盒子布局的范围中出现，并且它也影响着浮动元素和其他元素。
哪些方式会创建 BFC ？
通过以下方式，能创建一个 BFC 规范的布局（根据偶熟悉的程度简单划分几类，如下）：
平时常用
根元素是 html设置 float 的元素（脱离文档流）position: absolute | fixed（脱离文档流）block 元素设置 overflow （非 visible，内容不被加工处理，直接显示）display: inline-blockdisplay: flex | inline-flexdisplay: grid | inline-grid
不常用（table 系）
display: table-cell（table 单元格 cell 默认为此样式）display: table-caption（table caption 默认为此样式）display: table, table-row, table-row-group, table-header-group, table-footer-group
不常用
display: flow-root设置 contain: layout, content, paint 的元素column-count or column-width 不为 auto 的元素（包括 column-count: 1）column-span: all实际应用举例（摘自 MDN）
通过几个例子，感性的理解下 BFC 在实际场景中的作用：
margin 塌陷
首先大家知道当在相邻的块级元素的 margin 会发生合并现象（称为：外边距折叠）
通常会发生在：相邻元素，父子元素 margin 接触处，或者一个空的块级元素。
注意到两个 div 之间的 margin 边距合并成了一个。
怎么解决？
为目标元素外新建一个父元素，并设置 overflow: hidden 属性。
大家知道 hidden 会裁剪内容（而不是 visiable ），则父元素中的元素“们”的 margin 将“尽情释放”在父元素中。
能看到 margin 的上下边距被控制在新的父元素中了。
当然偶想说：你也可以将当前元素设置为 inline-block 触发 BFC ，只要符合规范都是可行的。
浮动元素丢失高度
大家知道设置浮动 float 属性的元素将脱离文档流，那么包裹浮动的父级元素的高度为其中非浮动的元素，甚至直接高度“塌陷”。
解决方式也很简单，参考上面的 margin 边距合并问题：大家也可以设置 overflow 来解决。
也可以设置 display: flow-root; 。
总结
简单讲了下 css 中 BFC 的概念。
并且通过几个例子示范了如何处理元素间的常见问题（ margin 边距合并、浮动高度丢失）。
当知道了 BFC 对元素之间的影响后，就能在页面布局中更好的隔离，或者处理元素间的关系。
本文摘自偶的头条号文章《前端面试中的 BFC 规范》
如果觉得不错，欢迎关注「前端雨爸」，让大家一同在前端路上成长进步。
@ 响应式和自适应的区别？
自适应：
在不同分辨率下不同设备上显示相同的页面。即：根据屏幕的宽度，自动调节网页内容的大小，使其主体内容和布局不变。
响应式：
响应式的概念应该是覆盖了自适应，但是包括的东西更多了。响应式布局可以根据屏幕的大小自动的调整页面的展现方式，以及布局。
(1)允许网页的宽度自动的调整
(2)尽量少使用绝对的宽度，多点百分比
(3)相对大小的字体:字体不要使用px写死，最好使用相对大小的em，或者高清方案rem，这个不限制与字体，别的属性也可以这么设置
(4)流式布局，float等float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
(5)选择加载css，<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />，这个意思是如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。
@ CSS里面的overflow的用法？
根据CSS的盒模型概念，页面中的每个元素，都是一个矩形的盒子。这些盒子的大小、位置和行为都可以用CSS来控制。
该盒子的高度将会根据它容纳内容的需要而增长，这就是该添加CSS的overflow属性的时候了
@ css隐藏元素的几种方法？
css隐藏元素是网页编写常用的方式，根据偶的经验总结了以下几种css隐藏元素的方法.
opacity
opacity属性的隐藏方法主要是将元素透明度opacity设置为0，从而在视觉上就隐藏了元素，但是元素本身依然占据的着原有空间。
浏览器支持来说 IE8以以及更早的版本需要使用filter属性代替，如: filter: Alpha(opacity=80)。
语法: opacity: value|inherit;
value: 透明值。可取值有 0.0 （全透明）和 1.0（不透明）。
inherit：从父元素集成opacity属性的值。
其规定使用的CSS版本为 CSS3
JavaScript上的opacity使用方法: object.style.opacity=80。
使用示例：
.hide { opacity: 0;}display
display属性的隐藏方法主要是将元素display值设置为none，将其不可见，连盒子模型也不生成，甚至连也不占用原有空间，使用该属性为none时用户对该元素的操作将不可用。
其规定使用的CSS版本为 CSS1。
JavaScript上的display隐藏时方法: object.style.display=”none”。
JavaScript上的display显示时方法: object.style.display=”除none的其他值”
display的属性值包含有: “inline-table”、”run-in”、”table”、”table-caption”、”table-cell”、”table-column”、”table-column-group”、”table-row”、”table-row-group”、以及 “inherit”。
使用示例：
.hide { display: none;}
如果使用jQuery对 带有display: none;的元素进行显示/隐藏使用: $(‘.element’).show() / $(‘element’).hide();
position
position属性的隐藏方法主要是将元素定位出可视区域，从而达到隐藏效果。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
该属性的值包含有: absolute，fixed，releative，static，inherit。
其规定使用的CSS版本为 CSS2。
JavaScript上的absolute隐藏时方法: object.style.position=”absolute” ,object.style.top=”-99999px”,object.style.left=”-99999px”。
使用示例：
.hide {
position: absolute;
top: -99999px;
left: -99999px;
}
visibility
visibility属性的隐藏方法主要是在使用动画效果时使用，将该值设置为 hidden将隐藏元素及其子孙元素，如，大家需要鼠标移动到元素后显示子元素，可在元素 的hover样式设置 元素（或其子孙元素）的visibility的值 为visible即可。
该属性的值包含有:visible，hidden，collapse，inherit。
其规定使用的CSS版本为 CSS2。
JavaScript上的absolute隐藏时方法: object.style.visibility=”hidden”。
使用示例：
.hide {
visibility: hidden;
}
.show
{
visibility: visible;
}
overflow
overflow属性的隐藏方法主要是, 使用超出隐藏的方法。
使用示例：
.overflow
{ overflow: hidden;}
