CSS浮动八：float崩溃特性（主要是：浮动的子元素不能撑起非浮动的父元素。）

<!DOCTYPE html>
<html>
<head>
<title>float崩溃演示</title>
	<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
	<div id="div1"></div>
</body>
</html>

#div1{
	border-width: 1px;
	border-style: solid;
	border-color: black;
}

效果：

（2）当在div中添加内容时候：div中内容的高度就是div的高度；即div中的内容会把div给撑起来；

效果：

（3.1）可以认为给div设置高度：div的宽度默认充满其所在父一级元素的宽度。（div默认的高度和宽度）

效果：可以发现并没有给div设置宽度，但div的显示效果是布满了整个浏览器的屏幕宽度。为什么？

解答：更准确的说法是，div布满了所在的上一级容器的宽度；该程序中，div所在的上一级容器就是<body>；此时<body>的宽度，就默认作为div的宽度。

即在没有设置div尺寸的情况下，div的高度就是div里面内容的高度；div的宽度就是div所处上一级容器的宽度！！！！！

（3.2）可以认为给div设置高度：div的宽度默认充满其所在父一级元素的宽度。（div默认的高度和宽度）

<!DOCTYPE html>
<html>
<head>
<title>float崩溃演示</title>
	<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
	<div id="div1">
		<div id="div2"></div>
	&l