如何清除浮动？
给父级添加 overflow:hidden 清除浮动方法
父级设置成 inline-block，其 margin: 0 auto 居中方式失效
万能清除法 after 伪类 清浮动（现在主流方法，推荐使用）
float_div:after{
content:".";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
.float_div{
zoom:1
}
img 中 alt 和 title 的区别
图片中的 alt 属性是在图片不能正常显示时出现的文本提示。
图片中的 title 属性是在鼠标在移动到元素上的文本提示。
为什么要初始化 CSS 样式。
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。
当然，初始化样式会对 SEO 有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
BFC
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及 overflow 值不为“visiable”的块级盒子，都会为他们的内容创建新的 BFC（块级格式上下文）。
BFC 有一下特性：
1、内部的 Box 会在垂直方向，从顶部开始一个接一个地放置。
2、Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生叠加
3、每个元素的 margin box 的左边， 与包含块 border box 的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4、BFC 的区域不会与 float box 叠加。
5、BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
6、计算 BFC 的高度时，浮动元素也参与计算。
那么我们怎样做就可以触发 BFC 呢
- float 除了 none 以外的值 overflow 除了 visible 以外的值（hidden，auto，scroll ）
- display (table-cell，table-caption，inline-block, flex, inline-flex)
- position 值为（absolute，fixed） fieldset 元素
- fieldset 元素
在以上情况下可以创建 BFC
BFC 可以解决的问题
1、margin 叠加的问题，我们将某个元素放到我们新建的 BFC 里面就可以避免 margin 叠加、
2、对于左右布局的元素，我们可以给右侧的元素添加 overflow:hidden 或者 auto，左侧的是 float:left
3、可以清除浮动，计算 BFC 高度，浮动元素不会撑开父元素的高度，我们可以让父元素触发 BFC,即使用 overflow:hidden
解释下浮动和它的工作原理？清除浮动的技巧？
浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
(1)、使用空标签清除浮动。
这种方法是在所有浮动标签后面添加一个空标签 定义 css clear:both. 弊端就是增加了无意义标签。
(2)、使用 overflow。
给包含浮动元素的父标签添加 css 属性 overflow:auto; zoom:1; zoom:1 用于兼容 IE6。
用过媒体查询，针对移动端的布局吗？
@media all and （min-width：500px）{
body{
background:red;
}
}
@media all and （min-width：700px）{
body{
background:green;
}
}
@media all and （min-width：900px）{
body{
background:black;
}
}
那么 rem 是什么呢？
rem(font size of the root element)是指相对于根元素 (html)的字体大小的单位。
如果一个页面中 html{font-size:16px;},那么 1rem = 16px，2rem = 32px;
分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景。
结构上：display:none 会从渲染树中消失，元素不占据空间且无法点击；visibility: hidden 不会从渲染树中消失，元素继续占据空间但无法点击；opacity: 0 不会从渲染树消失，元素占据空间且可点击。
继承性：display: none 和 opacity: 0 是非继承属性；父元素设置了 display:none 或 opacity: 0，子元素无论怎么设置都无法显示；
visibility: hidden 会被子元素继承，并且子元素可以通过设置设置 visibility: visible; 来取消隐藏。
性能：display: none 会引起重排，性能消耗较大；
visibility: hidden 会引起重绘，性能消耗相对较小；
opacity: 0 会重建图层，性能较高
transition 和 animate 有何区别?
transition：用于做过渡效果，没有帧概念，只有开始和结束状态，性能开销较小
animate：用于做动画，有帧的概念，可以重复触发且有中间状态，性能开销较大