原标题：四年前端在CSS面试上跪了/(ㄒoㄒ)/~~
四年前端跪在CSS面试上，不可思议! CSS面试不是初级前端才会跪的吗。
在面试最后，面试官突然问了我最后一个问题。怎么清除浮动。当然我很快给出最常用的方法。
.clearfix::after {
content: '';
display: block;
clear: both;
visibility: hidden;
height: 0;
}
本来我以为，面试官还会问，还有那些方法，我脑中已经构思了好几种方法。没想到，面试官竟然问我，这个方法清除浮动的原理。
原理！当时我就有点懵逼，这个方法很常见，也经常在用，但是就没去理解过其原理。脑子在飞快的运转。
首先 ::after 是元素的伪元素,在元素后面；
content 是伪元素的内容，为空,应该只是让伪元素不显示，而 display:block;height:0 保证伪元素高度为零不显示，应该跟清除浮动没多大关系。
另外 visibility: hidden ,是让伪元素浏览器渲染但不显示，也应该跟清除浮动没多大关系。
那么就剩下 clear: both ，我也不清楚它的含义，但是用排除法，这应该就是清除浮动的关键。
于是，我就含糊的回答，是clear: both这个属性起了作用。但是面试官的表情告诉我，我的回答他很不满意。
后面他又叫我，简单讲一下什么是BFC，它有什么作用。我只听过KFC,哪里听过BFC，这下彻底懵逼了。平时在工作中大多数都是在写JS代码，很少去操作CSS。
虽然后来还是被录取了，但是薪资下降了2K，达不到预期。只能很遗憾了。
回到家中，上网查一下资料，做个总结，分享一下。
CSS还是前端的基本功，不管你有多年工作经验！！！别认为只有在初级前端面试中才会问CSS，警戒！！
一、清除浮动的原理
没错，clear:both还真是清除浮动的关键，被我蒙对了。
clear是CSS中的定位属性，规定元素的哪一侧不允许其他浮动元素。那么clear:both就是规定在左右两侧均不允许浮动元素。
clear属性只能在块级元素上其作用，这就是清除浮动样式中display:block的作用。
另外visibility: hidden;height: 0;只要content的值为空。写不写都无所谓。
那么为什么要清除浮动，最常见的是因为外层容器高度坍塌，下面用一段代码演示一下。
.wrap {
width: 200px;
border: 1px solid #333;
}
.wrap:after {
content: '';
display: block;
clear: both;
}
.left {
float: left;
background: blue;
height: 100px;
width: 100px;
}
.right {
float: left;
background: red;
height: 50px;
width: 100px;
}
为了显示清楚一点，在.wrap:after 样式中的content设置为content: 'after伪元素',此时如下图所示。
随后在.wrap:after 样式中加上clear:both,表明after伪元素左右两侧均不允许浮动元素，没办法只好把after伪元素放在下面，此时如下图所示。
顺带撑起了.wrap父元素的高度，这样就相当清除了浮动了，解决了外层容器高度坍塌的问题。
那么我们把.wrap:after 样式中的content设置为content:' ',最后就如下图所示。
二、BFC的概念和应用
1、BFC的概念
BFC的全称是 Block Formatting Contexts。
Formatting Contexts是页面中的一块渲染区域，它拥有一套渲染规则，决定其子元素将如何定位，以及和其它元素的关系和相互作用。说白了就是一个决定如何渲染元素的容器。
2、BFC的渲染规则
那么BFC就是一个决定如何渲染元素的容器。我们要了解就是它的渲染规则。
1、内部的块级元素会在垂直方向，一个接一个地放置。
2、块级元素垂直方向的距离由margin决定。属于同一个BFC的两个相邻块级元素的margin会发生重叠。
3、对于从左往右的格式化，每个元素(块级元素与行内元素)的左边缘，与包含块的左边缘相接触，(对于从右往左的格式化则相反)。即使包含块中的元素存在浮动也是如此，除非其中元素再生成一个BFC。
4、BFC的区域不会与浮动元素重叠。
5、BFC是一个隔离的独立容器，容器里面的子元素和外面的元素互不影响。
6、计算BFC容器的高度时，浮动元素也参与计算。
3、BFC的渲染规则详解3.1 规则二
以上渲染规则，第一点比较好理解。第二点我们用一个例子解释一下。
按样式代码来看，红块和蓝块之间间距应该是40px。但实际上是20px。这就是BFC渲染规则的第二点。
因为BFC的触发条件之一就是根元素，所以body就是一个BFC容器，红块和蓝块是同在body下的相邻块级元素，其margin会生重叠，所以红块和蓝块之间间距只有20px。
3.2 规则三
第三点规则比较难理解我详细解释一下。首先要先理解包含块的含义。
包含块不是一个完整的box，一个完整的box包含margin包含块，border包含块，padding包含块，content包含块。
包含块有可能是box的content包含块，也可能是box的padding包含块。这取决于被包含块所包含的元素的position属性。
例如，如果某个元素position属性是absolute，包含块就是由它的最近的position的值不是static的父级元素的padding包含块组成。
再例如，如果某个元素的position属性是static或relative，包含块就是由它的父级元素的content包含块。
如果某个元素的position属性是fixed，包含块就是视口。
那么。BFC中的元素应该与其自身的包含块相接触，而非与BFC相接触，这个包含块有可能是BFC中的一部分，也有可能和bfc无关。
正常元素都是从左往右的格式化，那么对元素的position属性是absolute,right为0，或者元素的float的属性为right，那么就是从右往左的格式化，元素的右边缘和包含块的右边缘接触。
元素H触发生成BFC，其中有两个元素A和元素B，元素A的float的属性为left，那么元素A的左边缘和元素H(也是元素A的包含块)左边缘接触，如果元素B的float的属性也为left，元素B的左边缘不和元素H的左边缘接触，而是和元素A的右边缘接触。这种情况就可以用规则中的“即使包含块中的元素存在浮动也是如此，除非其中元素再生成一个BFC”来解释，元素的float的属性不为none会触发生成BFC，所以这种情况是不矛盾的。
3.3 规则四
这点是BFC最重要的一点渲染规则，可以用这个规则解决很多布局的问题。
3.4 规则五
这个规则，可以用来解决内部元素浮动，导致父级元素的高度坍塌问题。
4、BFC的触发条件
根元素
float 的值不是 none 。
position 的值不是 static 或者 relative 。
display 的值是 inline-block 、 inline-flex 、 flex 、 flow-root 、 table-caption 、 table-cell 。
overflow 的值不是 visible 。
三、BFC的应用
1、清除浮动
在文章最初，提到用clear:both来清除浮动，我们也可以根据BFC的渲染规则第6点(计算BFC容器的高度时，浮动元素也参与计算)来清除浮动，解决高度坍塌的问题。
2、解决上下margin边距问题
我们利用BFC渲染规则第2点(属于同一个BFC的两个相邻块级元素的margin会发生重叠)，那么 不属于同一个BFC的两个相邻块级元素的margin就 不会发生重叠。
那么我们在第二个div元素用一个div元素包裹起来，并用overflow:auto触发其BFC。再看一下效果是不是不重叠了。
3、实现自适应两栏布局
自适应两栏布局，是一个主内容区域和一个侧边栏区域组成，两个区域的宽度都可以随窗口大小自适应。有很多种写法可以实现。
这里来实现一种利用BFC的渲染规则的写法。
.main{
background: red;
height:500px;
}
.sider {
float: left;
width: 20%;
height:300px;
background: blue;
}
首先我们根据规则1，要先把.sider div写在.main div前面。这个.sider div才会浮动起来覆盖在.main div上面。
再根据规则4(BFC的区域不会与浮动元素重叠)，给.main加上overflow:auto;触发.main div生成BFC。
四、IFC的概念和应用1、IFC的概念
IFC的全称是Inline Formatting Contexts，也就是“内联格式化上下文”。
2、IFC的生成条件
IFC的形成条件非常简单，块级元素中仅包含内联级别元素，需要注意的是当IFC中有块级元素插入时，会产生两个匿名块将父元素分割开来，产生两个IFC。
3、IFC的渲染规则
子元素水平方向横向排列，并且垂直方向起点为元素顶部。
子元素只会计算横向样式空间，【padding、border、margin】，垂直方向样式空间不会被计算，【padding、border、margin】。
在垂直方向上，子元素会以不同形式来对齐(vertical-align)
能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框(line box)。行框的宽度是由包含块(containing box)和与其中的浮动来决定。
IFC中的“line box”一般左右边贴紧其包含块，但float元素会优先排列。
IFC中的“line box”高度由 CSS 行高计算规则来确定，同个IFC下的多个line box高度可能会不同。
当 inline-level boxes的总宽度少于包含它们的line box时，其水平渲染规则由 text-align 属性值来决定。
当一个“inline box”超过父元素的宽度时，它会被分割成多个boxes，这些 boxes 分布在多个“line box”中。如果子元素未设置强制换行的情况下，“inline box”将不可被分割，将会溢出父元素。
4、IFC的应用
水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。
垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。
五、FFC的概念和应用
1、FFC的概念
FFC的全称是Flex formatting contexts，弹性盒模型。
2、FFC的生成条件
父级元素设置 display:flex 或者`display:inline-flex
3、FFC的渲染规则`
可以看阮一峰的Flex 布局教程：语法篇，讲的非常详细。
要注意一点。生成FFC后，其子元素的float、clear和vertical-align属性将失效。
4、FFC的应用4.1、自动撑开页面高度，底栏总是出现在页面的底部
< style>
.wrap{
display:flex;
padding: 0;
margin: 0;
min-height: 100vh;
flex-direction:column;
}
.main{
flex-grow: 1;
}
style>
< bodyclass= "wrap">
< headerstyle= "line-height:50px;background:red;color:#fff;text-align:center">头部 header>
< mainclass= "main">内容 main>
< footerstyle= "line-height:50px;background:#eeeeee;color:#333;text-align:center">底栏 footer>
body>
4.2、经典的圣杯布局
< style>
.wrap{
display: flex;
padding: 0;
margin: 0;
min-height: 100vh;
flex-direction: column;
}
header,
footer{
flex: 0050px;
}
.content{display: flex;flex: 1}
.main{flex: 1;}.nav,.ads{flex: 00100px;background:green;}.nav{order:- 1;background:yellow;} style>< bodyclass= "wrap">< headerstyle= "line-height:50px;background:red;color:#fff;text-align:center">头部 header>< divclass= "content">< mainclass= "main">内容区 main>< navclass= "nav">侧边导航 nav>< asideclass= "ads">侧边栏 aside> div>< footerstyle= "line-height:50px;background:#eeeeee;color:#333;text-align:center">底栏 footer> body>
声明：文章著作权归作者所有，如有侵权，请联系小编删除。返回搜狐，查看更多
责任编辑：
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
