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>标签中的文本遇到浮动的框就自我调整位置，以防止被覆盖。

CSS浮动为什么不会遮盖同级元素的更多相关文章

  1. 浮动产生的高度坍塌解决方法以及使用siblings()方法获取同级元素

    高度坍塌:如果一个没有设置高度div里的元素都是浮动元素,这个时候就可能产生高度坍塌,因为div的高度都是普通元素撑起来的,div里的元素浮动之后,元素就会脱离文档流,所以父级的div高度就可能为零, ...

  2. 学习总结：CSS(二)块级与行级元素特性、盒模型、层模型、BUG与BFC、浮动模型

    一.元素的块级与行级特性 在CSS属性display控制元素是否及如何显示的特性,常用的值有none.inline.block.inline-block,在CSS3中还有一些新的特性状态,在这里不做讨 ...

  3. CSS浮动属性，知道原理就很简单,灵活控制块级元素在一行内显示

    在页面布局中,有两个非常常用的CSS属性.它们巧妙的控制着块级元素们之间的位置,灵活的让块级元素在一行内显示或者另起一行.说到这里,相信大家已经猜出来了,这两个属性就是控制块级元素浮动的属性.整个页面 ...

  4. 【转】css浮动元素的知识

    原文: http://www.cnblogs.com/xuyao100/p/8940958.html ------------------------------------------------- ...

  5. CSS圆角，输入框提示信息，JS查找同级元素

    input { /*设置边框*/ border:1px solid #95B8E7; border-radius: 5px; /*设置圆角,IE不兼容*/ height:18px } placehol ...

  6. css 浮动元素居中

    方法一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  7. CSS浮动、定位

    这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...

  8. css 浮动

    1. 浮动 浮动是css的布局功能,在CSS中,包括div在内的任何元素都可以浮动的方式显示.它能够改变页面中对象的前后流动顺序.浮动元素会脱离文档流,不占据空间.浮动元素可以左右移动,直到碰到包含它 ...

  9. CSS浮动特性总结

    1.假设现在CSS中没有浮动(float)属性,那么会变成一个什么样子.我们会发现,目前流行采用浮动方法实现的无论是分栏布局,还是列表排列我们都可以用其他一些CSS属性(不考虑table)代替实现,唯 ...

随机推荐

  1. 抽象类 C#

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  2. Bellman—Ford算法思想

    ---恢复内容开始--- Bellman—Ford算法能在更普遍的情况下(存在负权边)解决单源点最短路径问题.对于给定的带权(有向或无向)图G=(V,E),其源点为s,加权函数w是边集E的映射.对图G ...

  3. P3986 斐波那契数列

    题目描述 定义一个数列: f(0)=a,f(1)=b,f(n)=f(n−1)+f(n−2) 其中 a,b均为正整数,n≥2 . 问有多少种 (a,b),使得 k 出现在这个数列里,且不是前两项. 由于 ...

  4. CentOS 用户管理useradd、usermod等

    1.创建新用户useradd,默认的用户家目录会被存放在/home 目录中,默认的 Shell 解释器为/bin/bash,而且默认会创建一个与该用户同名的基本用户组. 主要参数: -d 指定用户的家 ...

  5. [BZOJ5292] [BJOI2018]治疗之雨

    题目链接 BZOJ:https://lydsy.com/JudgeOnline/problem.php?id=5292 洛谷:https://www.luogu.org/problemnew/show ...

  6. POJ2774：Long Long Message——题解

    http://poj.org/problem?id=2774 给定两个字符串 A 和 B,求最长公共子串. 论文题,把两个串合并起来,比较两个串各自的后缀的height值取最大即可. #include ...

  7. 51NOD 1227：平均最小公倍数——题解

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1227 懒得打公式了,看这位的吧:https://blog.csdn.ne ...

  8. BZOJ3709 [PA2014]Bohater 【贪心】

    题目链接 BZOJ3709 题解 贪心很显然 我们先干掉能回血的怪,当然按照\(d\)升序顺序,因为打得越多血越多,\(d\)大的尽量往后打 然后再干掉会扣血的怪,当然按照\(a\)降序顺序,因为最后 ...

  9. sass的颜色函数

    sass中有些非常实用的颜色处理函数,总结如下 1.颜色加深或变浅 lighten($color,$amount) //颜色变浅 darken($color,$amount) //颜色加深 例如: l ...

  10. bzoj1878: [SDOI2009]HH的项链（主席树/离线+BIT）

     这题有离线和在线两种做法.  离线:将查询区间按左端点排序,预处理出所有数下一次的出现位置,一开始将所有第一次出现的数a[i]++,之后当扫到这个数的时候a[next[i]]++,相当于差分,给之后 ...