浮动与定位

问答

---

1. 文档流的概念指什么？有哪种方式可以让元素脱离文档流?

答：

• 文档流就是元素本身在HTML页面渲染中的位置，自上而下的结构
• float:value,position:absolute,display:none可以使元素脱离文档流

2. 有几种定位方式，分别是如何实现定位的，使用场景如何？

答：

• position:absolute 绝对定位，相对于最近的非static定位的祖先元素而定位，用于某些需要改变位置的元素
• position:relative 相对定位，相对于自身的位置而定位，用于一些排版
• position:fixed 固定定位，相对于浏览器窗口定位，用于导航、广告、侧边栏等

3. absolute, relative, fixed 偏移的参考点分别是什么

答：

• position:absolute 相对于最近的非static定位的祖先元素而定位
• position:relative 相对于自身的位置进行偏移
• position: fixed 相对于浏览器窗口进行偏移
• demo

4. z-index 有什么作用? 如何使用?

答：

• 因为绝对定位与文档流无关，所以相同层级的盒模型会造成覆盖现象从而没有实现想要的效果，这时候可以在有定位的元素上使用z-index属性控制元素的Z轴来调整元素的层级，达到想要的效果。
• demo

5. position:relative和负margin都可以使元素位置发生偏移?二者有什么区别

答：

• position:relative根据自身做定位处理，并且没有脱离文档流，所以设置偏移后文档流的位置并没有变
• 设置负margin的方法会让其他元素的位置进行改变
• demo

6. 如何让一个固定宽高的元素在页面上垂直水平居中?

答：

• 设置position:absolute，top:50%，left:50%，margin-left: - 1/2的盒子宽度，margin-top: - 1/2的盒子高度 进行定位，形成页面上垂直水平居中。
• demo

7. 浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?

答：

• 浮动元素依据float:right or left属性设置，依据父元素的边缘限制，形成左右浮动，并且脱离文档流。
• 对于其他浮动的元素，会根据float:right or left依照方向依次排列
• 对于没有设置浮动的元素，由于设置浮动的元素会脱离文档流，所以在下方的元素会占据原来浮动元素的位置
• 对于文字，会形成文本环绕的效果
• demo

8. 清除浮动指什么? 如何清除浮动?

答：

• 清除浮动是指解决浮动所带来的页面布局的影响，比如：
  1. 父元素的高度无法被撑开，影响与父元素同级的元素
  2. 与浮动元素同级的非浮动元素会跟随其后
  3. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
• 父元素添加overflow:auto属性解决父元素高度塌陷的问题
• 通过给不要浮动的元素添加clear:both可以解决2,3的问题
• 最好看的写法是给父元素添加一个"::after"伪元素标签，相当于在父元素里添了了最后一个子元素，它的目的是为了解决1,2,3的问题

 .父元素:after{
    content:'';
    display:block;
    clear:both;
    height:0;
    visibility:hidden;
} 

• demo