极客观点
项目管理
HarmonyOS
问题描述
两个DIV，DIV1向左浮动，DIV2不浮动，效果为：DIV2浮动到了DIV1的位置，并且被DIV1覆盖，DIV2的文字被挤出去了
自己尝试过哪些方法
在DIV2中清除浮动可以解决这个问题，但是不太理解为什么不是一个元素也不是一行，为什么会重叠在一起。
相关代码
// 请把代码文本粘贴到下方（请勿用图片代替代码）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
div{
width: 100px;
height: 100px;
}
#div1{
background-color:red;
float:left;
}
#div2{
background-color:yellow;
/* clear: both; */
}
</style>
</head>
<body>
<div id="div1">
I AM DIV ONE
</div>
<div id="div2">
I AM DIV TWO
</div>
</body>
</html>你期待的结果是什么？
希望可以理解为什么会出现这个情况，感谢！
2.div2的文字被挤出去了是因为float其实没有完全脱离文档流，这是因为浮动的块虽然脱离的正常的文档流，但是还会占有正常文档流的文本空间 导致div2的文字内容被挤出。