CSS浮动为什么不会遮盖同级元素
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浮动为什么不会遮盖同级元素的更多相关文章
- 浮动产生的高度坍塌解决方法以及使用siblings()方法获取同级元素
高度坍塌:如果一个没有设置高度div里的元素都是浮动元素,这个时候就可能产生高度坍塌,因为div的高度都是普通元素撑起来的,div里的元素浮动之后,元素就会脱离文档流,所以父级的div高度就可能为零, ...
- 学习总结：CSS(二)块级与行级元素特性、盒模型、层模型、BUG与BFC、浮动模型
一.元素的块级与行级特性 在CSS属性display控制元素是否及如何显示的特性,常用的值有none.inline.block.inline-block,在CSS3中还有一些新的特性状态,在这里不做讨 ...
- CSS浮动属性，知道原理就很简单,灵活控制块级元素在一行内显示
在页面布局中,有两个非常常用的CSS属性.它们巧妙的控制着块级元素们之间的位置,灵活的让块级元素在一行内显示或者另起一行.说到这里,相信大家已经猜出来了,这两个属性就是控制块级元素浮动的属性.整个页面 ...
- 【转】css浮动元素的知识
原文: http://www.cnblogs.com/xuyao100/p/8940958.html ------------------------------------------------- ...
- CSS圆角，输入框提示信息，JS查找同级元素
input { /*设置边框*/ border:1px solid #95B8E7; border-radius: 5px; /*设置圆角,IE不兼容*/ height:18px } placehol ...
- css 浮动元素居中
方法一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- CSS浮动、定位
这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...
- css 浮动
1. 浮动 浮动是css的布局功能,在CSS中,包括div在内的任何元素都可以浮动的方式显示.它能够改变页面中对象的前后流动顺序.浮动元素会脱离文档流,不占据空间.浮动元素可以左右移动,直到碰到包含它 ...
- CSS浮动特性总结
1.假设现在CSS中没有浮动(float)属性,那么会变成一个什么样子.我们会发现,目前流行采用浮动方法实现的无论是分栏布局,还是列表排列我们都可以用其他一些CSS属性(不考虑table)代替实现,唯 ...
随机推荐
- 201621044079 韩烨 week11-作业11-多线程
作业11-多线程 参考资料 多线程参考文件 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 1. 源代码阅读:多线程程序 ...
- C语言的世界
大家好,我是一名大一的学生,我叫陈由钧,我来自计算机系,一开始选择这门专业的时候,是出于对计算机的热爱,我喜欢计算机,喜欢没事琢磨琢磨计算的各种程序,各种软件,所以我选择学习计算机这门专业,第一周我就 ...
- Expected Conditions的常用函数
Expected Conditions的使用场景有两种 1.直接在断言中使用 2.与WebDriverWait配合使用,动态等待页面上元素出现或者消失 1. title_is: 判断当前页面的ti ...
- CentOS修改DNS、IP地址、网关
一.CentOS 修改DNS 修改对应网卡的DNS的配置文件 # vi /etc/resolv.conf 修改以下内容 nameserver 8.8.8.8 #google域名服务器 nameserv ...
- 分享几个.Net计划任务组件
Quartz http://www.quartz-scheduler.net/ Hangfire http://hangfire.io/ Install-Package Hangfire 使用OWIN ...
- Python2爬虫获取的数据存储到MySQL中时报错"Incorrect string value: '\\xE6\\x96\\xB0\\xE9\\x97\\xBB' for column 'new' at row 1"的解决办法
由于一直使用python3进行编码,在使用Python2时,将爬虫数据连接数据库进行存储时,出现如上的报错,经查资料 是数据库编码问题. 如下转自:http://www.cnblogs.com/liu ...
- iphone手机与PC蓝牙出现感叹号且无法修复解决方案
解决方案如下: 1.需要下载Windows Mobile 6.5 的驱动 drvupdate-amd64.exe ,下载需要正版验证,手动安装驱动,具体步骤Google 2. 如果在BlueTooth ...
- BZOJ2243：[SDOI2011]染色——题解
http://www.lydsy.com/JudgeOnline/problem.php?id=2243 Description 给定一棵有n个节点的无根树和m个操作,操作有2类: 1.将节点a到节点 ...
- LibreOJ #6190. 序列查询（线段树+剪枝）
莫队貌似是过不了的,这题是我没见过的科技... 首先区间按右端点排序,然后一个扫描线,扫到某个区间右端点时候计算答案,线段树上节点的信息并不需要明确定义,我们只要求线段树做到当前扫到now时,查询[L ...
- Codechef MARCH14 GERALD07加强版
强制在线不代表不能预处理! 考虑暴力怎么干? 开始n个联通块.now=n 不断加入边,如果连接两个联通块,--now 否则不动. 后者的前提是和[l,id-1]的边构成环 所以,我们考虑每个[l,r] ...