css的float属性覆盖的问题

hi，大侠，请教一个简单的问题

如上图，既然框1左浮后，框2会顶格开始而被覆盖。为什么下面的html代码中的文字并没有被图片覆盖呢

好久没写样式了，这个好像一个是行级元素一个块级元素，你再看看文字设置一下浮动。会不会躲在图片后面。还有个z-index有没有帮助

浮动层：给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。

而此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。内联元素：有空隙就插入。

你的框2是块级元素，而文字属于内联元素

当前float元素为(a)
下一个紧邻非float元素为块级元素(b) 则：b会填充a遗留下来的空间，a会和b发生重叠，a的图层在上面。
下一个紧邻非float元素为内联元素(b) 则：b会紧跟在a的后面。并根据自身内联元素的特点来决定是否换行。

浮动 float 被创造的最初目的就是设置文字环绕图片的，只不过后来经过众多爱好者和开发者的不断延伸，
到现在通过浮动制作一些水平方向的布局反而成为了浮动的主要作用。
至于浮动元素不会覆盖文字，这是原本就自带的属性。