要想解决这个问题，很简单，设3个DIV即可解决问题：
<body> <div style="height: 200px; width: 200px; background-color: red;float: right;"> 我是红色 </div> <div style="height: 200px; width: 200px;background-color: gray; clear: left; "> 我是灰色 </div> <div style="height: 200px; width: 200px;background-color: green;float: right;"> 我是绿色 </div> </body>
1、当某个元素变成float:left时，有2个作用：一是这个元素会浮动在前一个元素的左侧(前提是前一个元素是行内元素)；二是此元素变成块内元素，其它元素可以与之在同一行。
2、如果前面一个元素是float:left的，那么后面一个元素将强行被拉到上一行，此时如果不想上去，用clear:left即可，这句话的意思是如果左边有浮动元素，将认为左侧是块状元素，即自己换行。
讲解css非常专业的一个网站：
refurl:http://zh.html.net/tutorials/css/lesson13.php
http://www.w3school.com.cn/cssref/pr_class_float.asp
相关推荐
在CSS世界中，`float`和`clear`是两个非常重要的布局属性，它们在网页设计中扮演着不可或缺的角色。这两个属性对于理解盒模型以及创建复杂的网页布局至关重要。在这篇文章中，我们将深入探讨`float`和`clear`的概念...
clear: both;}。 2. 盒模型的理解：文档中提到了box-sizing属性，并设置为border-box。这是非常重要的，因为默认情况下，CSS中的盒模型是按照content-box来计算元素宽度和高度的，这意味着设置的宽度和高度只包括...
禁止右侧出现浮动元素,如果右侧存在浮动元素,则右侧的浮动元素将在当前元素下面另起一行呈现.clear:both; 禁止左右两侧出现浮动元素,当前元素将排斥浮动元素独占一行呈现.上面提到的行也可能是多行组成的一个块,不...
Clear 属性有四个可能的值：both、left、right 和 none。其中，both 是最常用的值，可以清除左右两边的浮动。 此外，Float 属性还可能引发塌陷问题。如果父元素只包含浮动元素，那么它的高度就会塌缩为零。如果父...
为了解决这个问题，通常会添加一个清浮动的元素，例如`<div style="clear:both;height:0px;"></div>`，这可以恢复父元素的高度计算。 总的来说，`float`属性是CSS布局中的一个基础工具，但它的使用需要谨慎，因为它...
与`clear:left`类似，`clear:right`的作用是确保新元素不与右侧的浮动元素发生重叠。具体实现如下： ```html ;"> ; height: 100px; border: 1px solid red; float: left;">A元素 ; height: 200px; border: 1px ...
当一个元素设置了`float:left`或`float:right`时，它会脱离常规文档流，而`clear:both`则用于清除这种浮动，使后续元素不再受到前面浮动元素的影响。然而，`clear:both`对`margin-top`的特殊表现有时会让开发者感到...
4. **清除浮动**：内联元素不需要清除浮动，但浮动元素可能会导致父元素高度塌陷，需要使用 `clear:both` 或 `overflow:hidden` 来解决。 在示例代码中，展示了`display:inline` 和 `float:left` 的应用。可以看到...
3. **清除浮动**：由于`float`的影响，可能会出现父元素高度塌陷的问题，为此需要使用`clear`属性来清除浮动，如`clear:both`，`clear:left`，`clear:right`或`clear: both;`。 **内容二：页面布局与float** 1. **...
### CSS Float 属性详解 #### 一、引言 ...理解`float`属性的基本原理及其如何与`clear`属性配合使用，对于实现灵活多样的页面布局至关重要。通过本文档的学习，希望能帮助大家更好地掌握这一核心技能。
浮动主要有两种类型：左浮动（float:left;）和右浮动（float:right;）。左浮动元素会尽可能向左移动，直到它的左边接触到包含它的边框或者另一个浮动元素的右边。右浮动元素则相反，会尽可能向右移动，直到它的右边...
在CSS中，浮动分为两种类型：`float:left;` 和 `float:right;`。顾名思义，`left` 浮动会让元素向左移动，直到碰到父元素的左边界或者另一个浮动元素；`right` 浮动则相反，元素会向右移动直到碰到父元素的右边界...
2. `clear`属性：直接在后续元素上设置`clear`属性，比如`clear: both`，使其不跟随浮动元素。 3. `overflow`属性：将父元素的`overflow`设置为`hidden`或`auto`，也可以触发块级格式化上下文，从而解决高度塌陷。 ...
`clear:both`会确保元素下方没有浮动元素，从而保持正常的布局。 然而，随着CSS新布局模型（如Flexbox和Grid）的出现，`float`的使用逐渐减少，特别是在复杂的响应式设计中。这些新模型提供了更强大、更易于控制的...
当一个元素设置了`float:left`或`float:right`时，它会从文档流中抽出，周围的元素会围绕它排列。这种情况下，如果父元素没有设置高度（`height`），或者内容不足以填满整个父元素，那么父元素的高度将不会自动扩展...
当属性设置float（浮动）时，其所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动），或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;...
当一个元素被设置为`float:left`或`float:right`时，它会从当前的流中移出，向左或向右浮动，同时允许其他内容围绕它流动。这种特性在早期的网页设计中常用来实现图文混排。 然而，`float`带来的问题之一是“浮动...