CSS浮动为何不会遮盖同级元素

时间 2020-04-29

标签 css 浮动为何不会遮盖同级元素栏目 CSS 繁體版

原文原文链接

1.问题描述

在W3CSchool学习web前端时，看完CSS定位-浮动这一节后，感受没有什么问题。可是在CSS高级-分类这一节的中进行实践时，遇到了以下问题。测试地址：浮动的简单应用。css

完整的html+CSS源码以下：html

<html> <head> <style type="text/css"> img { border:solid 1px green; display:block; } #id1{ float:left; } div{ border:solid 2px blue; } p{ border:solid 1px red; } </style> </head> <body> <div> <img src="/i/eg_cute.gif" /> <img id="id1" src="/i/eg_cute.gif" /> <p> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> </div> </body> </html>

呈现效果：
前端

个人问题：
W3CSchool中讲解CSS定位，浮动那一节中，明确说对框1进行向左浮动时会遮住框2，缘由是浮动后，元素脱离了文档流，不占据空间，想左或向右移动直至左右两边碰到包含框的两边。为何我对两张图中的之一进行浮动时，不会遮住另外一张图呢？web

2.个人理解错在了哪里

首先，再一次查看W3CSchool官网权威对CSS浮动的讲解，详见：CSS浮动。学习

原文截图以下：
测试

图中红框的这句话，明明说到对框进行浮动时，会脱离文档流，若向右浮动直到，直到它的右边框碰到包含框的右边缘，随后便说道，若向左浮动，脱离文档流并向左移动，直到它的左边缘碰到包含框的左边缘。由于这样，就会致使原有的框被浮动的框覆盖。spa

按照W3CSchool的理解，怎么也不明白为何我测试的源码中，框中的图片并无覆盖另外一个框中的图片呢？3d

W3CSchool是权威教程，正确性经得住考验，可是有些细节仍是说的不太明确。个人问题就出现上图中红框中的那句话。code

这句话容易产生误导，浮动的框会脱离文档流，所以不占用文档中的空间。可是并不是任何状况下浮动框向左或向右移动直至左右两边碰到包含框的两边才中止。若是某个浮动框在移动的过程当中，碰到了包含内容的框时，也会中止。xml

所以，上图中的红框中的那句成立的前提是：浮动框在移动的过程当中，碰到框没有内容或者框内的内容会自我调整位置以防止被覆盖。好比<p>标签中的文本遇到浮动的框就自我调整位置，以防止被覆盖。