我有以下划分容器:
<span> Lorem. </span>
<div style="display: inline-block; background-color: yellow;">
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, officia? </p>
<p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, ab. </p>
</div>
<span> Lorem. </span>
不出所料，除法容器就像一个内联级元素。
当我将display属性的值更改为"inline flow-root"时，div容器的行为不再像内联级元素，而是像块级元素:
<span> Lorem. </span>
<div style="display: inline flow-root; background-color: yellow;">
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, officia? </p>
<p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, ab. </p>
</div>
<span> Lorem. </span>
根据Mozilla开发者网络文档，"inline-block;值应该等同于"inline flow-root"
为什么两个值会产生不同的显示结果?
提前感谢。
根据链接中给出的答案，
display: flow-root; Needs Chrome Canary or Firefox Nightlies.
sets it to display: table; or display: block;
May be you can use overflow: visiible to contain float-ed elements.