html中给子元素设置浮动以后父元素高度塌陷_zhouyuzhu666的博客

	在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
	由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。
	解决父元素高度塌陷有三种办法：
	1.给父元素写死一个高度，但是这样父元素的高度就不能随着子元素的高度而发生自适应变化了，所以这种方式是不推荐的；
	
	2.给父元素的最后面添加一个空白div，然后清除其浮动，这样做虽然会解决问题，但是会在页面中增加多余的结构，所以也不推荐使用；
	clear: both;
		
	3.给父元素设置overflow：hidden; 		

	4.通过affter伪元素选择器向父元素的最后添加一个空白的块元素，然后对其清除浮动，这种方法和第二种解决方法的原理一样，可以达到一个同样的效果，而且不会在页面中添加多余的div，推荐使用这种方式
	.div1::after{
        content: "";
        display: block;
        clear: both;
    }
	在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。