最近一直纠结于浮动和非浮动元素相邻时候的奇怪表现，按照我的理解，浮动元素浮动后就脱离了普通文档流，相邻的非浮动元素就会忽略浮动元素本来应该占有的那部分空间。
按照我之前的理解，那么我认为如果一个元素A浮动了，那么相邻的非浮动元素B一定会被A覆盖在下面了，但是实际情况中我有两个现象不解
【现象1】
为什么在IE6下面，浮动元素不能覆盖在相邻的非浮动元素之上，而是和相邻的非浮动元素一起左右排列？
【现象2】
官方说法是浮动元素会缩短行框
通俗说就是，为什么在IE8 firefox chrome safari下，浮动元素覆盖着相邻的非浮动元素，但是非浮动元素包含的文字却不被覆盖而是围绕着浮动元素？并且如果非浮动元素的垂直高度上超过了浮动元素高度后的文字又从容器最左侧出现了而不是围绕着浮动元素了，这到底是为什么呢？
下面先分析现象1
先上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>浮动与hasLayout研究 文字围绕</title>
<style>
*{
margin:0;
padding:0;
font-size:12px;
}
.box{
width:300px;
overflow:auto;
}
.leftbox{
background:#CCC;
width:100px;
height:30px;
float:left;
*margin-right:-3px; /*针对IE6 浮动元素水平右外边距移动-3px 即可解决*/
}
.textbox{
width:200px;
background:#FFCCCC;
}
</style>
</head>
<body>
<div class="box">
<div class="leftbox">浮动元素</div>
<p class="textbox">文本文本文本文本文本文本文本文本文本文本文本文本文文本
文本文本文本文本文本文本文本文本文本文本文本本文本文本文本文本文本文本文本文
本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
</div>
</body>
</html>
分别打开IE和chrome查看效果后，我们可以看到区别：IE下非浮动元素不会被浮动元素覆盖，而chrome等主流浏览器表现正常，即非浮动元素被浮动元素覆盖
下面解释下为什么IE下非浮动元素不会被浮动元素覆盖？
大家看看我上面的CSS部分
.textbox{width:200px;background:#FFCCCC;}
这里我给非浮动元素textbox定义了固定的宽高，这一行为触发了元素在IE下特有的hasLayout（拥有布局）属性，也就是说让textbox元素拥有了布局
说通俗一点，IE下当元素没有拥有布局的情况下，它的表现和其他浏览器是一致的，之所以看到的表现不同了，那是因为该元素被触发了hasLayout属性
【注意】
在IE678下80%以上的怪异表现和BUG均是它引起的，关于hasLayout我在后面文章里具体研究 下hasLayout （拥有布局）属性介绍，以及其触发条件
关于上面第一点的表现，就是因为three定义了固定宽高，而这个CSS设置会触发它的hasLayout，而当元素拥有布局后，在IE下它不再忽略浮动元素应该占有的空间，所以它不会被覆盖，而是排列在浮动元素的右侧
【解决方案】
如何让上面的代码表现的和IE8等浏览器一样呢？
很简单，解除非浮动元素的布局，也就是不要触发它的hasLayout，是什么引起的我们就删除什么，把
width:200px;
删除，我们就可以看到所有浏览器都一致的表现，那就是非浮动元素被浮动元素覆盖在下面
【注意】
IE6下很多BUG都是可以通过触发元素的hasLayout来解决的，但是也有需要避免触发的时候，这个例子就是需要避免触发hasLayout
现象二：
为什么在IE8等浏览器下，虽然非浮动元素按照我们的理解，它是被浮动元素覆盖了，但是它包含的文字为什么不会被覆盖，而是围绕浮动元素呢？
按照我们之前的理解，元素浮动后，非浮动元素会忽略浮动元素本应该占有的空间，所以我们肯定费解为什么文字不被覆盖，文字围绕浮动元素，好像还给浮动元素留了空间，并没有忽略啊，这怎么回事？
从看书到实际操作终于明白了原因：
浮动元素所说的不占据空间，指的是不占据块级文档空间，但是会占据行框空间。
关于行框空间与块空间（文档空间），我的理解如下：
（1）行框空间
一个行框自身的宽度是由其包含的行内框的尺寸决定的，而行内框的尺寸无疑就是因为其包含的文字等决定的。行框最大的宽是父容器的宽度。
比如上面代码中的P元素，它是个块元素，它如果没有被定义固定宽度，默认宽度应该是100%，也就是父容器的宽度。如果我们删除上面代码
.textbox{
width:200px;
background:#FFCCCC;
}
里面的固定宽度 width:200px; 这时候浮动元素不会占据块的空间，所以P元素就是100%的父容器宽度 300px，但是浮动元素会占据另外的空间，这就是我现在说的行框空间
（2）文档空间
经过上面的解释，我相信第二种空间也不需要再多解释什么了，上面说的块空间，其实就是文档空间。
浮动元素浮动后脱离文档流，不占据文档空间，所以它不会占据P元素的空间
相信到这里，大家都明白了为什么在IE8 firefox等浏览器下会有 浮动覆盖非浮动，非浮动的文字环绕浮动元素 这个现象了吧
.
相关推荐
最后，代码中还包含了一些JavaScript代码，这可能是为了处理代码运行或复制功能，与文字环绕图片的效果实现无关，所以在此不作详细解释。 总结一下，实现“左上角图片文字环绕在图片右侧”的主要CSS技巧包括： 1. ...
### CSS 浮动基础知识与常见问题解析 #### CSS 浮动概述 在CSS布局中，`float`属性是一个非常重要的概念，它允许元素脱离文档流并漂浮到一边，这样其他内容可以环绕在该元素周围。`float`属性主要用于创建多列布局...
本文将围绕“Js浮动页面顶部或鼠标点击处弹出提示层”这一主题，详细解析相关知识点。 首先，我们需要了解JavaScript的基本语法和DOM操作。DOM（Document Object Model）是HTML和XML文档的结构化表示，JavaScript...
在同级元素的浮动中，需要特别注意的一点是，一旦元素浮动，它就会脱离文档流，不再占据原来的位置，这可能会导致浮动元素后面的其他元素覆盖或与浮动元素重叠。因此，在处理布局时，有时需要在浮动元素后面添加一个...
- **问题背景**：在HTML页面中，经常会遇到需要文字围绕图片的情况，如新闻标题列表中的图片与文字的组合展示。传统方法中通常需要复杂的布局或者多次数据库查询来实现这一功能，增加了开发难度和服务器负载。 - **...
浮动（Float）是CSS布局中一个关键的概念，用于创建图文环绕、多列布局等效果。在网页设计中，浮动元素可以被移动到页面的左侧或右侧，使得其他内容围绕其排列，这一特性最早源于Netscape 1.1浏览器。然而，浮动也...
然而，当文本包含连续的英文字母或数字时，浏览器会按照单词来解析，如果一个单词的长度超过了容器宽度，浏览器不会将其拆分，而是将整个单词推到下一行，导致文字无法正确环绕图片。如下所示： ![文字环绕问题示例...
浮动与图片和文字的关系 在图文混排中，浮动布局非常有用。通过设置图片`float:left`或`float:right`，可以让文字环绕图片显示。 ### 6. Flexbox和Grid布局的出现 随着Flexbox和Grid布局的流行，浮动布局的重要性...
2. **XML 解析与标签配置** 要设置图片的环绕类型和位置，我们需要理解 Word 文档的 XML 结构。在 Word 中，图片的环绕类型和位置信息存储在 `<wp:anchor>` 标签中。例如，上下型环绕对应的 XML 是 `...
《电子政务与三刀头电动剃须刀刀头浮动支架技术解析》 电子政务，作为信息化时代政府管理和服务的重要组成部分，旨在通过信息技术提升公共服务效率，增强政府与公众的互动，推动社会经济的发展。在这个领域中，科技...
1. **CSS优先级**：如果其他CSS规则（如内联样式或更高的选择器权重）覆盖了浮动属性，那么元素就不会浮动。 2. **清除浮动**：在父元素中没有添加清除浮动（clear:both或clearfix）可能导致子元素的浮动效果失效。 ...
为了让文字从下方开始环绕，我们还需要清除左侧的浮动，即设置`clear:left`。这使得广告块下方的文本不会与广告块重叠，而是从广告块的右侧开始排列。 代码示例： ```html ;"> ;height:100px;width:1px;"> ;...
这种浮动方式常用于创建多列布局或使文本环绕图片。 在这个问题中，主体信息模块的子元素全部设置了浮动，这意味着它们不再占据原始的文档流空间，这可能会导致父元素失去高度，因为浮动元素没有贡献到父元素的高度...
在CSS布局中，浮动（float）是一种非常常用的技术，它可以使得元素脱离正常的文档流，向左或向右移动，而周围的元素则会围绕它进行排列。然而，当一个父元素内所有的子元素都进行了浮动之后，这个父元素就会失去高度...
当元素设置了浮动后，有时会导致后续的元素受到影响，比如它们可能会被浮动元素覆盖。为了避免这种情况，可以通过使用`clear`属性来清除浮动的影响。 - `clear: both;` 表示当前元素不允许左右两侧有浮动元素，即...
然而，由于不同浏览器对CSS的解析存在差异，处理浮动元素时可能会引发兼容性问题，尤其是在早期版本的浏览器中。 当一个元素设置了浮动（例如 `float: left` 或 `float: right`），它会从常规的文档流中移出，使得...
在这种情况下，其他非浮动元素会围绕这个浮动元素流动。然而，在某些情况下，如元素具有特定的`margin`值，尤其是在IE7这样的老版本浏览器中，可能会出现元素换行错位的bug。 在提供的代码示例中，我们看到一个`...
浮动布局（float）是早期实现页面布局的常用方法，`float:left`或`float:right`可以使元素向左或向右浮动，允许其他元素环绕其周围。然而，浮动会导致父元素的高度塌陷，需要通过清除浮动（clearfix）来解决。清除...
#### 三、浮动与清除 - **浮动（Float）**：浮动是CSS中一个非常重要的布局特性。当一个元素设置了`float`属性后，该元素会向左或向右移动直到接触到容器的边缘或另一个浮动元素的边缘。这样可以使得其他内容环绕在...
图片与文字的布局方式 - **图片浮动**：通常，我们会将图片设置为`float: left;`，这样图片会向左浮动，为右侧的文字腾出空间。图片的大小可以通过设置`width`和`height`属性来控制。 ```css img { float: left; ...