Web前端注意要点

一、margin塌陷问题

1.1 什么是margin塌陷？

        第一个子元素的 上 margin 和 最后一个元素的 下 margin 会作用在父元素上。

1.2 如何解决margin塌陷？

• 方案一：给父元素设置不为0的padding。
• 方案二：给父元素设置宽度不为0的border。
• 方案三：给父元素设置css样式，overflow: hidden。

二、margin合并问题

2.1 什么是margin合并？

        上一个兄弟元素的下外边距 和 下一个兄弟元素的上外边距会合并，二者取一个最大值，而不是相加。

2.2 如何解决margin合并？

        不需要解决，布局时，上下兄弟元素，只给一个设置上下边距就可以了。

三、元素浮动问题

1.1 元素浮动后的影响？

        对兄弟元素的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟元素无影响。

        对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然能束缚浮动的元素

2.2 解决浮动产生的影响（清除浮动）

• 方案一：给父元素指定高度。
• 方案二：给父元素也设置浮动。（会带来其他影响，慎用）
• 方案三：给父元素设置 overflo: hidden。
• 方案四：在最后一个浮动元素后，添加一个块级元素，并设置元素样式，clear: both。
• 方案五：为浮动元素的父元素设置伪元素，通过伪元素清除浮动，原理与四相同。（推荐）

  .parent::after {
      content: "";
      display: block;
      clear: both;
  }