一、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; }