代码：
极客观点
项目管理
HarmonyOS
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<div style="height:100px;background:red;">
<h1 style="float:left;">456</h1>
</div>
<div style="float:left;">
789
</div>
</body>
</html>
效果：
问题：
为啥将第一个div的height设置充足的值，第二个div就不会漂浮了？如果将height去掉，效果就变了。
浮动会引起其父元素的高度为0，当不给div设置height=100px的时候，它的高度为0意味着它不占位，下边值为789的div就会跑到上面来，这也说明了“浮动的元素并行显示”。给浮动元素的父元素设置height=100px的时候，父元素有了高度又恢复了作为div块状元素占据一行的特征。可以使用清除浮动的方法，让父元素div自适应高度显示。
清除浮动的常用方法：
1.在父级样式添加伪元素:after或者:before
.clearfix:after{
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
<div class="fatherEle clearfix">
2.父级div设置css属性overflow：auto
3 回答5.1k 阅读✓ 已解决
5 回答2k 阅读
2 回答1.9k 阅读✓ 已解决
1 回答3k 阅读✓ 已解决
3 回答2.4k 阅读
4 回答2.2k 阅读
3 回答2.1k 阅读
红色的盒子内的唯一一个元素浮动走了, 所以高度没有了,
这是float浮动的特性
具体细节百度"为什么要清除浮动"来了解,
网上很多教程有讲解