css面试题--定位与浮动

1、为什么需要清除浮动？

        在非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开，内容会溢出到容器外面而影响布局。这种现象被称为浮动。

        浮动的原理：浮动元素脱离文档流，不占用空间；浮动元素碰到包含它的边框或其他浮动元素边框停留。

        浮动元素会引起的问题：父元素的高度无法被撑开，影响与父元素同级的元素；与浮动元素同级的非浮动元素会跟随其后；若浮动的元素不是第一个元素，则该元素之前的元素也要浮动，否则会影响页面的展示。

        清除浮动的方式：给父级添加高度；最后一个浮动元素后添加一个空标签，并设置clear:both；包含浮动元素的父元素设置overflow:hidden；使用:after伪元素。

2、clear清除浮动的原理

        元素盒子的边不能和前边的浮动元素相邻，对元素设置clear属性是为了避免浮动元素对该元素的影响，而不是清除浮动。

3、BFC的简单理解

        简单来讲，BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定的规则进行物品摆放，并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部的影响。

        创建BFC的条件：

               根元素（body）；

                元素设置浮动；

                元素设置绝对定位；

                display值为table-cell、inline-block、flex等；

                overflow的值为scroll、hidden、auto。

        BFC的特点：

                垂直方向上，自上而下排列，和文档流排列一致；

                在BFC中，上下两个相邻容器的margin会重叠；

                计算BFC的高度时，需要计算浮动元素的高度；

                BFC区域不会与浮动元素重叠；

                每个元素的左margin和容器的左border相接触。

        BFC的作用：

                解决margin重叠问题；

                解决高度塌陷问题；

                创建自适应两栏布局。

4、什么是margin重叠问题？如何解决

        两个块级元素的上外边距和下外边距可能会合并为一个外边距，其大小会取其中外边距值大的那个，这个行为就是外边距折叠。脱标的元素，如浮动元素和绝对定位元素等的外边距不会重叠，且重叠只会出现在垂直方向上。

        计算原则：

                如果两者都是正值，就取最大值；

                一正一负，就是算正负相加的和；

                如果都是负值，就用0减去两个中绝对值大的那个。

        解决办法：

                兄弟折叠

底部元素变为行内盒子：display: inline-block
底部元素设置浮动：float
底部元素的position的值为absolute/fixed

        父子重叠：

父元素加入：overflow: hidden
父元素添加透明边框：border:1px solid transparent
子元素变为行内盒子：display: inline-block
子元素加入浮动属性或定位

5、元素的重叠顺序

         元素发生重叠时，有着特定的垂直显示顺序，css盒模型的层叠顺序如下：

                背景和边框：建立当前层叠上下文元素的背景和边框；

                负的z-index；

                块级盒：文档流内非行内级非定位后代元素；

                浮动盒：非定位浮动元素；

                行内盒：文档流内行内级非定位后代元素；

                z-index：0；

                正的z-index。

        当定位元素z-index:auto，生成盒在当前层叠上下文中的层级为0，不会建立新的层叠上下文，除非是根元素。 

6、position的属性有哪些

7、absolute和fixed的共同点与不同点

        共同点：改变行内元素的呈现方式，将display置为inline-block；使元素脱离普通文档流，不再占据文档物理空间；覆盖非定位文档元素。

        相同点：absolute与fixed根元素不同，absolute的根元素可以设置，fixed根元素是浏览器；在有滚动条的页面中，absolute会跟着父元素进行移动，fixed固定在页面的具体位置。

 8、对sticky定位的理解

        sticky定位被称为粘性定位，基于用户的滚动位置来定位。粘性定位的元素是以来用户滚动，在position:relative和position:fixed定位之间切换。具体表现为在跨越特定阈值前为相对定位，跨越阈值后，为固定定位。这个特定的阈值指的是top、right、bottom、left之一。