题

BFC

BFC是块级格式化上下文。BFC它是一个独立的渲染区域，只有Block-level box（块元素）参与，它规定了内部的Block-level box如何布局，并且与这个区域外部毫不相关。
可以理解成：创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素（里面怎么布局都不会影响外部），BFC仍属于文档中的普通流
特性：
① 内部的块级元素会在垂直方向上一个接一个的放置；
② 位于同一BFC下的相邻块级子元素在垂直方向上会发生margin重叠；
③ 位于不同BFC下的相邻元素之间不会发生margin重叠；
④ BFC可以包含浮动元素；
⑤ BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；
创建：
① 根元素；
② float的值不为none
③ overflow的值为auto、scroll或hidden
④ display的值为:
table-cell：它会作为一个表格单元格显示（类似td和th）。
table-caption：此元素会作为一个表格标题显示。
inline-block：行内块元素。
⑤ position的值为fixed或absolute
用途：
① 闭合浮动；
② 阻止margin重叠
③ 自适应流体布局

清除浮动的方法

①给设置了浮动的元素的父级加高。
float主要有 3 个属性值none, left和right
②给设置了浮动的元素的父级设置overflow：hidden。如果需要兼容IE，在添加一个zoom：1
overflow是最适合清除浮动影响的元素，而不是clear。但是它的本职工作还是裁剪。它是overflow-x和overflow-y的简写属性。
overflow裁剪是沿着border内边缘裁剪的。
visible 默认值。内容不会被修剪，会呈现在元素框之外
hidden 内容会被修剪，并且其余内容不可见
scroll 内容会被修剪，浏览器会显示滚动条以便查看其余内容，滚动条区域一直在
auto 由浏览器定夺，如果内容被修剪，就会显示滚动条

③给需要清除浮动的元素设置clear：both；
clear属性的作用是清除浮动。
clear : none | left | right | both

取值：

none : 默认值。允许两边都可以有浮动对象

left : 不允许左边有浮动对象

right : 不允许右边有浮动对象

both : 不允许有浮动对象

④在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）
⑤伪类清除：.clearfix：after{content：""；clear：both；display：block；}
.clearfix{zoom：1}
position一共有 5 个值：
static 正常的布局行为，即元素在文档常规流中当前的布局位置。
relative 元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置
absolute 脱离正常文档流，通过指定元素相对于最近的非static定位祖先元素的偏移，来确定元素位置
fixed 和absolute类似，但是它是相对于屏幕视口的位置来指定元素位置。
sticky 盒位置根据正常流计算，然后相对于该元素在流中的 flow root（BFC）和最近的块级祖先元素定位。在所有情况下，该元素定位均不对后续元素造成影响

层叠上下文

层叠上下文(stacking context)，是HTML中一个三维的概念。在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的X轴，Y轴以及表示层叠的Z轴。一般情况下，元素在页面上沿X轴Y轴平铺，我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。
通元素设置position属性为非static值并设置z-index属性为具体数值，产生层叠上下文

常见页面布局

⑴静态布局：最传统、原始的Web布局设计。网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow:scroll)来实现滚动查阅。
优点：采用的是css2之前的写法,不存在浏览器兼容性。布局简单。
缺点：但是移动端不可以使用pc端的页面,两个页面的布局不一致,移动端需要自己另外设计一个布局并使用不同域名呈现。
⑵流式布局：流式布局也叫百分比布局。随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整，这个正好与自适应布局相补。
优点：元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化。
缺点：屏幕尺度跨度过大的情况下，页面不能正常显示。
⑶弹性布局：弹性布局是CSS3引入的强大的布局方式，弹性盒模型：display：flex；
优点：简单、方便、快速
缺点：CSS3新特性,浏览器兼容性非常头疼。而且手机浏览器对flex的支持也不是很理想。
⑷响应式布局：采用自适应布局和流式布局的综合方式，为不同屏幕分辨率范围创建流式布局。利用媒体查询可以检测到屏幕的尺寸(主要检测宽度)，并设置不同的CSS样式，就可以实现响应式的布局。