我们可以使用max-height来解决这一问题
.element { max-height: 0; overflow: hidden; transition: max-height .25s; } .element.active { max-height: 666px; /* 一个足够大的最大高度值 */ }展开后我的高度只要比max-height小，那么元素的高度就是height的计算高度，一个高度不定的任意元素的展开动画效果就能实现了。
css世界官方demo
注意： max-height值在保证比height大的情况下尽可能和的小
因为max-height可能会影响动画的时间， 比方说，我们展开的元素高度是 100 像素，而 max-height 是 1000 像素，假如一个动画1000ms，则前 900 ms 我们是看不到收起效果的，因为max-height 从 1000 像素到 100 像素变化这段时间，元素不会有区域被隐藏，会给人动画延迟 900 ms 的感觉
4. 内联元素 4.1 哪些是内联元素从定义：
内联元素的内联指的是外在盒子，外在盒子表现为inline的元素都是内联元素。
inline-block 和 inline-table 都是“内联元素”，因为它们的
“外在盒子”都是内联盒子。自然 display:inline 的元素也是“内联元素”，那么，
按钮元素是内联元素，因为其 display 默认值是 inline-block；img图片元素也是内联
元素，因为其 display 默认值是 inline 等。
从表现看:
就行为表现来看，“内联元素”的典型特征就是可以和文字在一行显示。
浮动元素貌似也是可以和文字在一个水平上显示的,但是浮动已经脱离文档流，不属于内联元素。
4.2 内联世界深入的基础—内联盒模型 (import) <p>这是一行普通的文字，这里有个 <em>em</em> 标签。</p>看似普通，实际上包含了很多术语和概念，或者换种通俗的说法，包含了很多种盒子。
内容区域
内容区域指一种围绕文字看不见的盒子，其大小仅受字符本身特性控制，本质上是一个字符盒子（character box）；但是有些元素，如图片这样的替换元素，其内容显然不是文字，不存在字符盒子之类的，因此，对于这些元素，内容区域可以看成元素自身。
这是一行普通的文字，这里有个 <em>em</em> 标签。以上代码表现的区域，可以理解为内容区域。
内联盒子
如果外部含内联标签等），则属于“内联盒子”；如果是个光秃秃的文字，则属于“匿名内联盒子”
行框盒子（line box）
每一行就是一个“行框盒子”（实线框标注），每个“行框盒子”又是由一个一个“内联盒子”
组成的。
包含盒子/包含块（containing box）
<p>标签就是一个“包含盒子”（实线框标注），此盒子由一行一行的“行框盒子”组成。
4.3 幽灵空白节点在 HTML5 文档声明中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”一样。这个“空白节点”永远透明，不占据任何宽度，看不见也无法通过脚本获取，就好像幽灵一样，但又确确实实地存在，表现如同文本节点一样，因此，我称之为“幽灵空白节点”
<style> div { background-color: #cd0000; } span { display: inline-block; } </style> <body> <div><span></span></div> </body>浏览器打开上述代码，发现div的高度不是0，原因就在于幽灵空白节点。
“幽灵空白节点”实际上也是一个盒子，不过是个假想盒，名叫“strut”，中文直译为“支柱”，是一个存在于每个“行框盒子”前面，同时具有该元素的字体和行高属性的 0 宽度的内联盒。
Each line box starts with a zero-width inline box with the element’s font and line
height properties. We call that imaginary box a “strut”.
内容总结与 张鑫旭大神 -- 《css世界》