CSS一些常见小问题

CSS浮动高度塌陷问题解决

问题产生原因

当父元素没有设置高度，而子元素全部设置了浮动，此时子元素全部脱落父元素浮动，无法撑起父元素的高度，此时父元素高度就会塌陷。

解决方案

方案1

父元素设置固定高度

方案2

父元素设置属性
overflow: hidden;

方案3

在所有浮动子元素下方加入一个空div，并给div设置属性
clear: both;

解决margin-top由子元素传递到父元素导致显示异常的问题

问题

在包含结构里，如果给子元素设置了margin-top，应该是子元素出现上边距，但是浏览器解析时，会将margin-top传递给父元素，导致父元素和子元素同时下来。

解决方法

1、给父元素添加overflow: hidden;
2、给父元素添加一个透明的上边框border: