目录
（1）一个空白的div中，如果不进行任何尺寸的设定，并且div里面没有任何内容时，div是没有高度的：
（2）当在div中添加内容时候：div中内容的高度就是div的高度；即div中的内容会把div给撑起来；
（3.1）可以认为给div设置高度：div的宽度默认充满其所在父一级元素的宽度。（div默认的高度和宽度）
（3.2）可以认为给div设置高度：div的宽度默认充满其所在父一级元素的宽度。（div默认的高度和宽度）
（4）总结：元素的宽度默认占满父一级元素；；；；元素的高度由子元素撑起来。
3.额外测试：（父一级元素是浮动，子一级也是浮动的情况等）瞎测着玩的；（这部分主要是包裹特性，暂时作废，看下篇博客）
（1）示例一：当把div1，div2，div3都设成float时：
（4）示例四：div1设成浮动，其子元素非浮动时：（这个和下篇博客的包裹特性有关）
float崩溃又称float破坏、崩塌，崩溃也可称作高度塌陷：核心内容是，浮动的子元素不能撑起非浮动的父元素。
以为div为例时，float崩溃指，当子div2设置成float后，然后这个浮动的div2在一个非父div1中；div2的高度不会撑起div1的高度；下面详细解释。
一：float崩溃
1：正常的情况，不会出现崩溃的情况
（1）一个空白的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>
</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>
</div>
</body>
</html>#div1{
border-width: 1px;
border-style: solid;
border-color: black;
background-color: red;
}
#div2{
background-color: yellow;
height: 230px;
}效果：div2（黄色）占满整个屏幕：因为div2的父一级元素是div1，没有设置div2尺寸是，div2的宽度默认占满整个div1；div1的父一级元素是<body>，没有设置div1尺寸是，div1的宽度默认占满整个<body>；所以，div2也是占满屏幕的；
（4）总结：元素的宽度默认占满父一级元素；；；；元素的高度由子元素撑起来。
如果设置了div1的宽度：未设置宽度的div2（的宽度）默认占满其父一级元素（这儿是div1）：
效果：
再如：再在div1中添加一个div3：
设置div3：
效果：可以发现，目前一切完美，没有看到任何崩溃的现象
……………………………………………………
2.出现了崩溃：浮动的子元素不能撑起非浮动的父元素
（1）示例1：如果把div3设为浮动：
效果：这个效果就是崩溃（或称破坏性）：div1的高度只被div2撑起，div3不起作用了；
此时，浮起来的div3脱离了标准的文档流，他是一个浮动层；此时，原来父一级的div1（标准流）就不在包含div3了；
（2）示例二：如果，div2，div3均设置成浮动：
效果：这个效果就是崩溃（或称破坏性）；div1的高度为零；
此时，浮起来的div2和div3都脱离了原有的标准的文档流；此时，原来父一级的div1（标准流）就不管不到div2和div3了，因为div1的高度只能被文档流子元素（也就是非浮动的元素）撑起来：
上面两个例子也就是说：浮动的子元素并不能撑起父元素的高度；必须得是标准流的子元素（非浮动的）才能撑起父元素的高度
OK，崩溃讲完了。接下来的内容，是自己测试着玩等待内容。
3.额外测试：（父一级元素是浮动，子一级也是浮动的情况等）瞎测着玩的；（这部分主要是包裹特性，暂时作废，看下篇博客）
（1）示例一：当把div1，div2，div3都设成float时：
效果：emmm，父元素和子元素都是浮动的时候，，，，浮动的子元素又可以撑起父元素的高度了。。。果然，同类很重要。
（2）示例二：当把div1，div2设成float时：
效果：很容易理解，div1和div2这俩父子都是浮动的，他俩在浮动层去玩了；把非浮动的div3给抛弃了；
（3）示例三：自然：div1，div3设成float时：
效果：仔细分析后，会发现这个效果也是符合div的特性的；
分析：
●div3定义在div2之后，div2是非浮动的，div3不能向上移动：
●div1没有设置尺寸，而且因为div1是浮动，而且有时父一级元素，其最上边的位置不能下来，最下面的位置又必须要到div3；所以div1的高度，在数值上等于黄色和蓝色的高度（这个解释有点没底气，，，下面一个例子可以是个薄弱的佐证）；div1的宽度等于div3的宽度：
为了看到上面div1的实际高度，把div1宽度设大一点
效果：可以印证上面，div高度的观点。
（4）示例四：div1设成浮动，其子元素非浮动时：（这个和下篇博客的包裹特性有关）
效果：
重点是：浮动的div1（父一级元素），被非浮动的子一级元素给“撑起来了”，
可以发现，浮动的父一级元素被非浮动的子元素撑起恶时候，其高度为子元素的高度（不严谨），宽度不是上一级元素（这儿是<body>）的宽度了。。。。这多少体现了包裹的特性。。。
326
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
