定位与浮动

为什么需要清除浮动？清除浮动的方式

浮动的工作原理：

  1. 浮动元素脱离文档流，不占空间（引起高度塌陷）。

  2. 浮动元素向左或向右平移，碰到包含它的元素的边框或则其他浮动元素的边框停留。高度塌陷：当容器的高度没有子元素高度高的时候，容器的高度由子元素撑起来，当子元素浮动后，容器的高度会变成原来的高度，子元素会溢出到容器外面，这就是高度塌陷。

浮动引起的问题？

  1. 父元素高度无法撑开。

  2. 影响与父元素同级的元素。

  3. 影响了同级的非浮动元素的布局。

怎么清除浮动？

  1. 给父元素设置height。

  2. 给最后一个浮动元素之后添加一个空的div，并添加clear:both样式。

  3. 给浮动元素的父元素添加overflow:hidden或overflow:auto。

  4. 给最后一个浮动元素之后添加一个空的div，给空的div添加伪元素给伪元素设置content: "";display: block;clear: both;。

使用 clear 属性清除浮动的原理？

对BFC的理解，如何创建BFC

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

当两个块元素的上外边距和下外边距可能会合并为一个外边距，外边距的距离由最大的外边距值决定，这就是外边距折叠（重合）。注意：

  1. 重叠只会出现在垂直方向。

  2. 浮动元素和绝对定位这种脱离文档流的元素的外边距不会折叠。

计算原则：

  1. 如果两者都是正数，那么就取最大者。

  2. 如果是一正一负，就会正值减去负值的绝对值。

  3. 两个都是负值时，用0减去两个中绝对值最大的那个。

对于margin重叠有两种情况，兄弟之间重叠和父子之间重叠。兄弟之间：

  1. 底部元素设置display:inline-block;

  2. 底部元素设置浮动。

父子之间：

  1. 给父元素添加overflow:hidden。

  2. 给父元素添加border: 1px solid transparent。

  3. 子元素设置display:inline-block，变成行内元素。

  4. 子元素加浮动或absolute定位或fixed定位。

元素的层叠顺序

position的属性有哪些，区别是什么

属性值 概述
absolute 绝对定位，相对于除static定位以外的一个父元素进行定位，如果没有这样一个父元素就相对于body定位，元素脱离文档流，通过top，right，bottom，left属性进行调整定位。
relative 相对定位，相对原来的位置进行定位，元素不脱离文档流，通过top，right，bottom，left属性进行调整定位。
fixed 固定定位，相对于屏幕窗口进行定位，元素的位置在屏幕滚动时不会发生改变。
static 默认值，没有定位。会忽略top，right，bottom，left，z-index属性。
inherit 继承，从父元素继承position属性。
sticky 可以设置top或bottom属性，当没到达这个属性值的时候就是position:relative，当到达sticky定位要求的值时(比如top:100px)，这时候就相当于position:fixed。它是相对于离它最近的一个可滚动的祖先定位。

position:sticky的使用条件

  1. 父元素不能设置overflow:hidden或overflow:auto属性。

  2. 必须有top、bottom、left、right四个值之一，否者只会处于相对定位。

  3. 父元素高度不能低于sticky元素的高度。

  4. sticky元素仅在其父元素内生效。

position:sticky的坑

  1. sticky不会触发BFC。

  2. z-index无效。

  3. 当父元素设置height:100%时，页面页面滑动到一定高度之后sticky会失效。

display、float、position的关系

absolute与fixed共同点与不同点

共同点：

  1. 都使元素变成diaplay:inline-block。

  2. 元素脱离文档流，不占空间。

  3. 会覆盖非定位元素。

不同点：

  1. absolute是相对于最近的position属性不是static的父元素定位，而fixed是相对于视图窗口定位。

  2. 在页面滚动时，absolute会跟着页面的滚动而滚动，而fixed固定在窗口的位置不动。