因为 [BFC](https://link.segmentfault.com/?enc=6GGrcR4y3S%2B5Z055bMtNHw%3D%3D.6rfv2p%2Fw9fBkPhvY7%2Fm65HVqCn7ExdSFhdM1c6aXaG1DkQbvvd6DGs0Q4gxi6U6Gc%2BKC3vvcl1E2OIMz5xtSNsMctfRwRy7WiKEcJYsLV62HBGs4IRZcStnHlVwuj%2B%2B%2F) 和 [IFC](https://link.segmentfault.com/?enc=DwVKQyF4NA%2BwhEP11yQKFQ%3D%3D.oIb5Lol%2BaWDD%2BubaURwzWVGa8OecMZAcglXb4LSQja58ySJf4y7%2FVhNpsM%2B4a2Ky%2Fsv9oIPAC7qZlmNSDcsGsa0q4mvbg9W5WQ7H5Fnciwc%3D) 的不同。比如说以下的例子中,只有包裹 `inline-block` 的 `.container` 容器会有高度。 .container { background-color: red; } 理解起来会很费劲,具体得解释可以查看以下两个问题: * [Why Empty Display Inline Block Element Create Height But Display Inline and Display Block not? - Stack Overflow](https://link.segmentfault.com/?enc=8o2s76r8zFqbSJ48B3lY0Q%3D%3D.ClPQg4IbF6OrXOoXxeWp3EGwQ6GMJmCBFk3ehobqGdSl7ZSiiioio3X02eSl9Tjan2R0aieNlEXwJAezjP30BWN451MnYHn1XhHScXsCtPJ9afu%2FxzY8u1S2s5UZrFa4fwpaGsud8283tgswIMi3A0Z4zsK2wG5Mk6pMpcIPzrY%3D) * [html - How to determine height of content-box of a block and inline element - Stack Overflow](https://link.segmentfault.com/?enc=BC2L%2FlvDoiYCve%2FlNYuYAQ%3D%3D.Y6iFldXHZA4%2B%2Fu3ZA5AlEozrPcgXyBJbzXiEHOdqbaICMLlJwbD%2BV4aBWbFZOEw%2BZ%2BnHg%2B%2BzN52%2BFWgdIWzvqHEwE3jIbjMuHRi59zaWiSpFdpvsEOq74Lw5%2FqCHOA7MfwjppRLGXT8nA07iPKYVx914%2BMHydt7OWg4E1KOA4cU%3D) **其他** [[css-display] Should 'run-in flow-root' blockify to 'block' or 'flow-root'? · Issue #1715 · w3c/csswg-drafts](https://link.segmentfault.com/?enc=rsgBmabyt7d2d9SYYVyLKQ%3D%3D.p2NI7vNNlKI4BwlUefvTq3GJ1umVaNNDQQnHT79v3pY9pM%2F1nyCJ16bQh9SesKo3)