前端面试题3（html/css）

一、简述BFC规则特性，及解决的问题?
1、BFC规则
内部的标签会在垂直方向上一个接一个的放置
垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin会发生重叠
每个标签的左外边距与包含块的左边界相接触（从左向右），即使浮动标签也是如此。
BFC的区域不会与float的标签区域重叠
计算BFC的高度时，浮动子标签也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子标签不会影响到外面标签，反之亦然

2、BFC解决的问题
解决外边距折叠
特性的第②条：垂直方向上的距离由margin决定。在常规文档流中，两个兄弟盒子之间的垂直距离是由他们的外边距所决定的，但不是他们的两个外边距之和，而是以较大的为准。特性的第⑥条：bfc就是页面上的一个独立容器，容器里面的子标签不会影响外面标签，同样外面的标签不会影响到BFC内的标签。所以可以让其中的一个标签处于一个BFC中
自适应两栏或三栏布局
左边固定宽度，右边不设宽，因此右边的宽度自适应，随浏览器窗口大小的变化而变化。
左右两边固定宽度，中间不设宽，因此中间的宽度自适应，随浏览器的大小变化而变化。
浮动的标签会覆盖正常标签根据第④条规则，BFC的区域不会与float的标签区域重叠，
所以我们只需要创建一个BFC，它就会自动缩小，以不被浮动的标签遮盖，就能够实现右侧栏自适应。
防止字体环绕
浮动的盒子会遮盖下面的盒子，但是下面盒子里的文字是不会被遮盖的，文字反而还会环绕浮动的盒子。
清除浮动
利用overflow:hidden清除浮动，因为浮动的盒子无法撑出处于标准