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

**源码测试浏览器:**IE8核心的360浏览器


1.问题描述

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

完整的html+CSS源码如下:

<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,原因是浮动后,元素脱离了文档流,不占据空间,想左或向右移动直至左右两边碰到包含框的两边。为什么我对两张图中的之一进行浮动时,不会遮住另一张图呢?


2.我的理解错在了哪里

首先,再一次查看W3CSchool官网权威对CSS浮动的讲解,详见:CSS浮动

原文截图如下:

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

按照W3CSchool的理解,怎么也不明白为什么我测试的源码中,框中的图片并没有覆盖另一个框中的图片呢?

W3CSchool是权威教程,正确性经得住考验,但是有些细节还是说的不太明确。我的问题就出现上图中红框中的那句话。

这句话容易产生误导,浮动的框会脱离文档流,因此不占用文档中的空间。但是并非任何情况下浮动框向左或向右移动直至左右两边碰到包含框的两边才停止。如果某个浮动框在移动的过程中,碰到了包含内容的框时,也会停止。

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


参考文献

[1]http://www.w3school.com.cn/css/css_positioning_floating.asp

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏MixLab科技+设计实验室

App之应用图标标记

以下为正文: ? 1、概念 应用图标标记,称为Badge App Icon。 Badge,徽章,具象来说, 就是佩带在身上用来表示身份、职业的标志。 它有着悠久...

6287
来自专栏二次元

给你的博客加上个Live2D看板娘吧

本文章中所用模型解包自药水制作师手机游戏,版权归该官方所有。(没错,我也是来安利这款游戏的)

3230
来自专栏代码GG之家

android 窗口绘制的一些总结

好久没有更新技术文了,年后一直忙于其他事情,空闲时间,就在反思,规划,谈一些人生感悟。今天终于提起笔来,继续在代码的世界里,埋头耕耘。 今日我来进行一个分享大会...

3046
来自专栏葡萄城控件技术团队

ActiveReports 9实战教程(3): 图文并茂的报表形式

基于上面2节内容,我们搭建了AR9的开发环境,配置好了数据源。在本节,我们以官方提供的3个中文图文并茂的报表来展示AR9的功能,并通过实战的方式一一分享。 以往...

2066
来自专栏ThoughtWorks

展望2016,REACT.JS 最佳实践 | TW洞见

今日洞见 译者:ThoughtWorks-吕靖,译自 Péter Márton:React.js Best Practices for 2016。 本文所有内容...

3909
来自专栏Material Design组件

Human Interface Guidelines — Modality

1573
来自专栏逍遥剑客的游戏开发

XACT Q&A

1815
来自专栏腾讯NEXT学位

【干货】Cocos Creator制作一个微信小游戏(下)

| 导语 微信小游戏都火成这样了,为什么不尝试一下? 我们的目标是使用Cocos Creator从零开始制作一个小游戏,并放到微信上玩。 上文链接:Cocos...

2.2K4
来自专栏程序员的知识天地

tag标签是什么?对seo有什么用?

作为SEOer的我们在优化网站的时候回遇到几种标签,而tag标签就是其中一种,tag标签和一般的HTML标签不太一样,tag标签是一种特殊的标签,那么tag标签...

981
来自专栏Java帮帮-微信公众号-技术文章全总结

操作IDEA 这些命令就够了

操作IDEA 这些命令就够了 Intellij IDEA中有很多快捷键让人爱不释手,stackoverflow上也有一些有趣的讨论。每个人都有自己的最爱,想排...

3155

扫码关注云+社区

领取腾讯云代金券