Css 为什么浮动div后面的div中包含的文本显示不正确？

我有4个分区，按顺序排列：#页眉，#内容，#导航，#页脚

#标题{
背景：浅蓝色；
身高：10%；
边框：1px纯黑；
}
#内容{
背景：绿色；
不透明度：0.5；
宽度：74%；
浮动：左；
身高：80%；
边框：1px纯黑；
}
#航行{
背景：棕色；
身高：80%；
宽度：24%；
文本对齐：居中；
边框：1px纯黑；
}
#页脚{
背景：火红；
身高：10%；
边框：1px纯黑；
}
正文，html{
身高：100%；
保证金：0；
}

默认值
浮动
航行
清除显示：内联块是使用浮点的更好方法

内联块优于float，使用float方法不适合页面布局的原因是因为float CSS属性最初仅用于将文本环绕在图像上，而从设计上看，它不适合一般页面布局

你可以做到这一点，首先删除

浮动：左

在#内容和添加

显示：内联块

加

显示：内联块


#标题{
背景：浅蓝色；
身高：10%；
边框：1px纯黑；
}
#内容{
背景：绿色；
不透明度：0.5；
宽度：74%；
显示：内联块；
身高：80%；
边框：1px纯黑；
}
#航行{
背景：棕色；
身高：80%；
宽度：24%；
显示：内联块；
文本对齐：居中；
边框：1px纯黑；
}
#页脚{
背景：火红；
身高：10%；
边框：1px纯黑；
}
正文，html{
身高：100%；
保证金：0；
}
默认值
浮动
航行
清除
，因为导航不是浮动的。这可以帮助您逐步理解：Hi Temani Afif，我已经更新了问题，以包括我在浏览器中看到的内容，还包括开发人员工具快照，该快照显示导航div已上移以隐藏在内容div后面。我无法理解，如果导航div被上移以取代内容div，为什么导航中包含的文本没有移到content div后面并被隐藏。为什么它不包含在导航div中，而是出现在footer div中。我没有在其他地方应用其他CSS。此外，我还没有包括任何其他css文件，因为导航是25%，因此文本溢出。。。要测试发生了什么，请将导航设置为100%，并开始减小宽度，您将看到发生了什么，文本将环绕float，即使嵌套在另一个div或多个div中。浮点元素从不与内联元素（如文本）重叠，而只与块元素重叠。这就是为什么您的float位于navigation div之上，而不是其中的文本（您可以查看我共享的链接以更好地理解这一点）