**源码测试浏览器：**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

CSS浮动为什么不会遮盖同级元素相关推荐

CSS浮动、定位及显示隐藏元素
一.CSS浮动 1.标准流(普通流/文档流:即标签按规定默认排列方式) 块级元素独占一行,从上到下排列. 行内元素会按顺序,从左至右排列,碰到父级元素边缘则自动转行. 2.为什么浮动? (1)多个块级 ...
php元素浮动会产生哪些影响,css浮动带来什么问题
css浮动带来的影响:1.由于浮动元素脱离了文档流,所以父元素的高度无法被撑开,影响了与父元素同级的元素:若没有给父元素设置高度,那么父元素就不会在显示屏上显示.2.浮动元素不再占用原文档流的位置,它 ...
CSS浮动元素特点有什么
什么是浮动? 元素的浮动是指设置了浮动属性(flot)的元素. CSS浮动有什么作用? 1.让多个盒子水平排列成一行,浮动成为布局的重要手段; 2.可以实现盒子的左右对齐等等; 3.浮动最早是用来控制 ...
css浮动后页面乱了怎样解决,详解浮动元素引起的问题和解决办法
一.问题多个浮动的元素无法撑开父元素的宽度,父元素的高度可能会变成0. 若浮动元素后面跟非浮动元素,非浮动元素会紧随其后浮动起来. 若浮动元素前面还有同级元素没有浮动则会影响页面结构. 二.解决办法 ...
css中如何居中一个浮动元素,css浮动元素的居中的例子
居中对于大家来说指的是页面了,此时我们通常使用提50%来实现了,下面来看一个css浮动元素的居中的例子,希望例子对各位有用. 关于浮动元素的居中,其实不太常用,但为了应付某些奇葩的面试官,也要知道怎么 ...
css hover控制同级元素
html <div class="download">下载按钮</div> <div class="sousuo">搜索按钮 ...
css hover控制子元素、同级元素样式
引用:获得最佳方案的参考网址这是参考网址的原案 1.父子关系 .a:hover .b{color:red}; 2.同级相邻元素 .a:hover + .b{color:red}; 同级不相邻元素 . ...
(13) css浮动补充
一.字围现象与前面压盖效果结构类似,同级元素中前面的元素浮动,后面的元素不浮动,不浮动的元素内部还有一些文字,浮动的蓝盒子会压盖住黄绿盒子的一部分,但是文字内容不会被盖住,蓝色盒子中的文字会让开蓝盒 ...
【web前端开发】CSS浮动
文章目录 1.浮动 2.伪元素 3.标准流 4.行内块元素的问题 5.浮动的作用 6.浮动的特点 7.清除浮动方法1:额外标签方法2:单伪元素方法3:双伪元素方法4:overflow 1.浮动 ...

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

1.问题描述

2.我的理解错在了哪里

参考文献

CSS浮动为什么不会遮盖同级元素相关推荐

最新文章

热门文章