web复习中自己的总结

外边距溢出

小编在此之前总是分不清外边距溢出和高度坍塌，在此次复习中，小编分清了，good!
外边距溢出：特殊情况下，给子元素设置外边距时，效果会做用到父元素（父元素未设置宽高）上
解决方法：

1.给父元素设置边框
	父元素{
		border:1px solid red;
	}
2.使用父元素内边距代替子元素外边距
3.在第一个子元素位置处添加空的table(添加伪元素，内容生成)
/*上外边距溢出*/
父元素::before{
		content:'';
		display:table;
		}
/*下外边距溢出*/
父元素::after{
		content:'';
		display:table
		}

高度坍塌

由于浮动元素会脱离文档流，所以导致不占据页面空间，所以会对父元素高度带来一定影响，如果所有的元素都浮动，就会造成父元素高度为0
解决方案：

1.给父元素设置浮动
2.设置父元素的宽高
3.为父元素设置overflow属性
4.在父元素的最后添加一个空的子元素，设置clear:both
5.使用内容生成的方式
.clear:after{
	content:'',
	display:block;
	clear:both
}