初学者css页面布局2种容易发生的错误而导致页面混乱的原因

float浮动

发生情况：当给子元素设置浮动时，父元素没有具体高度,就会造成父元素高度的塌陷。父元素宽度不变，而高度为0。

1. 检查方法
   浏览器f12调试检查父元素
2. 解决方法：
   ①给父元素设置overflow：hidden；溢出隐藏
   ②给父元素设置高度
   ③使用伪元素，清除左右浮动

外边距击穿问题

1. 外边距击穿常常出现于大盒子中嵌套小盒子，设置内层小盒子的外边距时，大盒子也会出现同样的效果。
2. 外边距击穿的产生原因：相邻的两个盒子元素会共用一个外边距
3. 相邻的定义：同级或嵌套的盒子元素他们中间没有内容（非空）
4. 解决方法：
   ①给大盒子（父元素）设置overflow：hidden；溢出隐藏
   ②给大盒子（父元素）添加内边距padding
   ③给大盒子（父元素）设置边框 ps：若怕边框颜色影响布局可将边框设置与内容同色