什么是死循环呢？？比如一个<div>元素里面有一张vertical-align为bottom同时高度为192像素的图片，此时该<div>高度就是192像素，假设此时，插入一个子元素，高度设为100%，如果此时height:100%可以计算，则子元素应该也是192像素。但是啊但是，我们的父元素height值是auto，岂不是现在高度要从原来的192像素图片再加上插入的子元素变成384像素了，然后height:100%的子元素高度又要变成384像素，父元素高度又双倍……死循环了！！
实际这是错误的，大家不要被误导了！！

例子1:

但是我们发现父元素的宽度只有图片加文字的距离。。这是为什么呢？？

这需要了解浏览器渲染的基本原理。首先，先下载文档内容，加载头部的样式资源（如果有），然后按照从上而下，自外而内的顺序渲染DOM内容。套用本例就是，先渲染父元素，后渲染子元素，是有个先后顺序的。因此当渲染到父元素的时候，子元素的width:100%并没有渲染，所以，宽度就是图片加文字内容的宽度；等渲染到文字这个子元素的时候，父元素宽度已经固定，此时的width:100%就是已经固定好的父元素的宽度，宽度不够怎么办？溢出就好了，overflow属性就是为此而生的。

同样的道理，如果height支持任意元素100%，也是不会死循环的，和宽度类似，静态渲染，一次到位。

这就引申出另外一个问题，父选择器，大家有没有想过如果CSS支持了父选择器，会有什么后果？

后果之一，就是原先的一次渲染被破坏，子元素能够影响父元素的渲染，于是乎，“死循环”开始了，页面渲染会出现各种各样的死循环，现有的很多CSS规则会被颠覆，无限宽度反复渲染等问题就会出现。这就是为什么父选择器呼声那么高，却迟迟不支持的原因。

例子2:

CSS的padding属性值和margin属性值如果是百分比值，则无论是水平方向还是垂直方向都相对于父元素的宽度计算，这就埋下了一个看似会“死循环”的隐患，我们直接看一个例子

因为在先开始的父元素渲染时，父元素的宽度就被固定为200px不再变化。当渲染到子元素的时候会用固定的200px减去17px的滚动条宽度来作为子元素的宽和高，所以都为183px

这个例子也进一步证明了：CSS中，如果单纯是静态渲染，是没有死循环这种说说法的！