1.背景
最近在开发过程中，遇到了这么一个很奇怪的现象，在浏览器中打开开发者工具，查看元素时，发现当前元素的高度为0，但是查看它的子元素时，发现其子元素的高度并不为0，非常奇怪，最后还是通过网络解决了这个问题，在这里记录一下。
2.产生原因
是因为子元素设置了浮动，设置浮动之后是无法撑开父元素的。
先来看一下现象：
- 子元素没有浮动
下面是div下套了个div，子div因为有文本节点，所以会有一个默认高度。
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<style type="text/css">
.children {
background: red;
}
</style>
</head>
<body>
<div class="parent">
<div class="children">
这是子元素
</div>
</div>
</body>
</html>打开浏览器的开发者工具查看元素高度
此时父元素和子元素的高度一致。
- 子元素添加浮动
但是如果将子元素设为浮动之后，父元素的高度会变为0。
子元素的高度没有任何变化，但是父元素此时的高度变为了0.
3.解决方法
这里只列出个人觉得比较简单且容易理解的解决方法。
- 只需要在浮动的子元素后清除浮动，在子元素后添加一个空div，让其清除浮动。
<div style="clear: both;"></div> - 让父元素也浮动，浮动元素会闭合浮动元素