CSS浮动与定位
1. 浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
特征：
- 浮动元素使元素脱离文档流，按照指定方向发生移动，遇到父级元素边界或其他浮动元素停下
对父元素的影响
如果一个父元素的子元素都是浮动元素，并且父元素本身没有设置宽高，则会导致父元素塌陷。
父元素塌陷
对其他浮动元素的影响
所有的浮动元素会水平排列知道直到遇到父级边界，如果宽度不够就换行向下排列，此时如果第一个的高度高于第二个就会导致被浮动元素挡住的情况
被浮动元素挡住
对普通元素的影响
普通元素会认为浮动元素是不存在的，所以普通元素不会发生变化，而浮动元素会浮在普通元素上面将其覆盖
红色浮动元素将绿色普通元素覆盖
对文字的影响
普通的元素认为浮动元素是不存在的，但是文字认为它是存在的，所以文字会环绕浮动元素，如下图绿色的div被覆盖了，但是它的文字内容却在红色的浮动的div外面。
文字环绕浮动元素
2. 清除浮动指什么? 如何清除浮动? 两种以上方法
- 使用clear样式，clear： left | right | both;
- 利用BFC来清除浮动。
因为BFC可以包含浮动，因此可以让父元素生成一个新的BFC从而包围浮动的子元素。因此给父容器设置BFC,就可以解决父容器在子元素都为浮动时的塌陷问题，因此可以清除浮动。
3. 有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
（1）静态定位：position:static
默认参数，默认布局方式；
（2）相对定位：position: relative
相对自己默认位置定位；一般作为绝对定位的元素参考点，或者页面图片的小偏移。
使用场景：在自身基础上调整位置；
（3）绝对定位：position: absolute
绝对定位元素脱离正常文档流，相对其设置了position为static以外的参数的父元素，若没有，就相对于页面左上角；
使用场景：部分账户头像红点提示角标、元素的水平垂直居中。
（4）固定定位：position: fixed
相对浏览器窗口进行定位。因此当滚动产生时，固定定位元素依然处于窗口的某个固定位置。
使用场景：网站“返回顶部”按钮，小广告。
（5）粘性定位：position: sticky
是相对定位和固定定位的结合。默认情况下表现为相对定位，当浏览器窗口顶端与元素的距离等于 top 属性的值时，转变为固定定位。
使用场景：产品类网站购物导航条/介绍导航条。
4. z-index 有什么作用? 如何使用?
z-index 属性设置元素在Z轴方向上的堆叠顺序。数值越大，元素越靠前。可设置负的 z-index 属性值。Z-index 仅能在定位元素（position:relative/absolute/fixed）上奏效。
5. position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
position:relative;只相对自己原本位置发生偏移，不影响其它普通流中元素的位置。
margin：除了让元素自身发生偏移还影响其它普通流中的元素。
6. BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
BFC是块级格式上下文。其解释是：浮动、绝对定位（绝对定位、固定定位）元素、块级容器（如inline-block、 table-cell、table-caption）并不是块级盒子，还包括那些overflow属性值取值visible以外的块级盒子，会为它们的内容物创建一个新的块级格式化上下文。对元素设置以下属性就可以生成BFC：
float: left | right;
overflow: hidden | auto | scroll;
display: table-cell | table-caption | inline-block;
position: absolute | fixed;
BFC的作用有：
（1）解决margin重叠问题。所谓margin重叠是指处于同一个BFC的相邻元素、嵌套元素，只要它们之间没有阻挡（如：边框、非空内容、padding等）就会发生margin重叠。这是只要让其中一个元素生成新的BFC就能解决margin重叠问题。
（2）清除浮动。因为BFC可以包含浮动，所以让父容器生成新的BFC可以让父容器在视觉上包围了浮动的子元素，因而清除了浮动。
7. 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
在同一个BFC中相邻元素的上下外边距会合并，合并时，取较大值为外边距
解决方法
父子外边距合并
修复
解决方案
网友评论