浮动元素有什么特征？
- 浮动元素可以在页面中移动，知道他的外边碰到页面边缘或另一个浮动元素的外边为止。
- 浮动元素并不在普通流中，普通流中的元素排列不会被浮动元素影响。
对父容器、其他浮动元素、普通元素、文字分别有什么影响?
对父容器影响：
-
父容器并不能感知浮动元素的存在，因此普通流并不会受浮动元素的影响，并且当父元素没有其他普通元素只有浮动元素时，父元素将不会被撑开
对父容器的影响 对其他浮动元素:
浮动元素之间彼此能感知到
当有多个浮动元素时会排成一排并左对齐
-
在容器中浮动元素一排的空间不够时，多出的浮动元素下移到下一排左对齐排列，如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”
对其他浮动元素 对普通元素：
-
普通元素无法感知到浮动元素的存在
对普通元素 对文字：
-
如果父容器内文字足够多，又有一个向左浮动的图像，那文字就会围绕这个图像浮动，意思就是文字能感知到浮动元素的存在
对文字
清除浮动指什么?
- 当容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动
如何清除浮动?
- 父级div定义height
- 原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
- 优点：简单、代码少、容易掌握
- 缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
- 建议：不推荐使用，只建议高度固定的布局时使用
- 结尾处加空div标签 clear:both
- 原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
- 优点：简单、代码少、浏览器支持好、不容易出现怪问题
- 缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好
- 建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法
- 父级div定义 伪类:after 和 zoom
- 原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题
- 优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
- 缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持
- 建议：推荐使用，建议定义公共类，以减少CSS代码
- 父级div定义 overflow:hidden
- 原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
- 优点：简单、代码少、浏览器支持好
- 缺点：不能和position配合使用，因为超出的尺寸的会被隐藏
- 建议：只推荐没有使用position或对overflow:hidden理解较深者使用
- 父级div定义 overflow:auto
- 原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度
- 优点：简单、代码少、浏览器支持好
- 缺点：内部宽高超过父级div时，会出现滚动条。
- 建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧
其他的只做了解的清除浮动的方法：传送门
有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
- static 普通流
- 当没有为一个元素(例如div)指定定位方式时，默认为static，也就是按照文档的流式(flow)定位，将元素放到一个合适的地方。所以在不同的分辨率下，采用流式定位能很好的自适合，取得相对较好的布局效果。
- 参考点为当前正常文档流
- relative 相对定位
- 在static的基础上，如果想让一个元素在他本来的位置做一些调整(位移)，可以将该元素定位设置为relative，同时指定相对位移(利用top,bottom,left,right)，相对定位的元素仍然在文档流中，仍然占据着他本来占据的位置空间——虽然他现在已经不在本来的位置了
- 参考点为元素本身
- absolute 绝对定位
- 如果你想在一个文档(Document)中将一个元素放至指定位置，你可以使用absolute来定位，将该元素的position设置为absolute，同时使用top,bottom,left,right来定位。
- 如果没有父元素，参考点为body
- 绝对定位会使元素从文档流中被删除，结果就是该元素原本占据的空间被其它元素所填充
z-index 有什么作用? 如何使用?
- z-index用于控制BFC中元素的堆叠顺序，z-index数值越大元素位置越靠上
position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
- position:relative，元素在移动的时候，其在普通流上占据的位置并没有改变，在该元素后面的元素的位置不会因为元素的移动而移动。
- 负margin，元素在移动的时候，在普通流上的位置发生改变，该元素后面的元素的位置也会相应改变。
BFC 是什么？
- BFC（Block Fomatting Context） 块级格式化上下文，浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
如何生成 BFC？
- 根元素
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
BFC 有什么作用？
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)
*BFC的区域不会与float box重叠 - BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此
- 计算BFC的高度时，浮动元素也参与计算
在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
- 两个在普通文档流中相邻的元素外边距相遇的时候发生合并。这个相邻可以是父子关系相邻，兄弟关系相邻，或者一个元素内部没有东西，自身的上下边距相遇时都会发生外边距合并
- 两个外边距都是正数，取两者之中的较大者；两个外边距都是负数，取两者之间绝对值较大者；当两个外边距一正一负时，取两者的和
- 若不想让相邻元素外边距合并可将元素生成为BFC
-
父子外边距合并举例：
父子外边距合并
