要想解决这个问题，很简单，设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
相关推荐
禁止右侧出现浮动元素,如果右侧存在浮动元素,则右侧的浮动元素将在当前元素下面另起一行呈现.clear:both; 禁止左右两侧出现浮动元素,当前元素将排斥浮动元素独占一行呈现.上面提到的行也可能是多行组成的一个块,不...
当属性设置float（浮动）时，其所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动），或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;...
复制代码代码如下: <div xss=removed>float:left</div> <div xss=removed>clear:both</div> 2222222222222222222 前面那个DIV浮动的div的margin是起作用的； 后面那个DIVclear:both后，只有margin-top不起作用，...
什么是CSS清除浮动？ 网络上流行的说法是：在非IE浏览器（如Firefox）下，当容器的高度（height）为auto，且... .clear-float {clear:both;} clear 属性是 CSS 1 就提供的用来清除浮动的样式，设置了 clear 属性的元
clear:both; } p{ padding:5px 0 5px 0; margin:0px; text-align:justify; line-height:19px; } p.details{ padding:5px 15px 5px 15px; font-size:11px; } p.details_cart{ clear:both; padding:25px 30px 5px 0px;...
例如：div元素内的两个子元素p都float:left，外面的div会变成没有高度，此时该怎么办呢？通常解法是在排版流里面的元素加一个after的伪元素，将它设成display: block以及clear:both即可解决。 CSS Code复制内容到...
.menu_box_style2_2{clear:both;height:50px;} .menu_box_style2_2_1{float:left;width:250px;height:50px;overflow:hidden;text-align:left} .menu_box_style2_2_2{float:right;width:720px;height:30px;margin:20...
float: left; clear: both; 2、外边距自动适应(窗口大小自动适应，这个配置后看着非常舒服): 样式：margin: auto; 3、内边距，内容与边框的距离 padding: 20px; 4、给div元素添加圆角的边框、边框...
1、CSS中的clear有四个参数： none：允许两边都可以浮动。 left：不允许左边有浮动。 right：不允许右边有浮动。 both(默认)；不允许有浮动。 2、一开始在CSS中clear浮动... float:left; clear:none; } #msg_Div{
找了一些现成的插件，发现都不太符合我的需求，于是...clear:both;padding:30px 0px 0px 20px;margin-left:20px;margin-top:10px;} .row{display:inline-block;float:left;width:90px;clear:none;top:0;/**//*backgro
该清除浮动的，必定手不软的clear:both 昨天遇到img图片在ie下有有空隙 其他的浏览器都好好，就是ie中出现 老纠结的，检查的好一会 发现img中只清除border 在线效果DEMO 仅IE看哦 亲爱的朋友，你晓得如何解决吗？ ...
主要是float属性引起的，清除float的就可以了。...这个结构，box_left和box_right左右浮动，box_bottom有border，在IE下显示都是好的，但是Fierfox不显示边框，只要给box_bottom的CSS里加个clear:both;就解决了。
} .clearFloat{ clear:both; height:0; line-height:0; font-size:0;} .tab_ul{ margin:10px auto 0; padding-left:20px; width:228px; height:31px; background-color:#FCEDFF;border:1px solid #DBA4E8; border-...
}.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;background:#DDD}.clear{clear:both} 这种方法，感觉之前大家用的比较多。但是无缘无故多出一个空的div,而且...
float: left; } #gallery{ width: 800px; height: 300px; overflow: hidden; } #gallery img{ position: absolute; } #thumbs{ width: 100px; height: 300px; overflow: hidden; } #next{ display: ...
#main_city,#all_province {clear:both;} #main_city div,#all_province div{width:600px;clear:left;} #main_city h4,#all_province h4{float:left;display:inline;font-size:16px;} #main_city div span,#al
float:left; /* 左浮动 */ font-size:12px; width:190px; /* 固定宽度 */ padding:0px 6px 20px 0px; margin-top:-88px; /* 向左移动出去 */ color:#bb9d80; background:url(parabottom...
后面还加了个clear:both;的div来清除浮. 问题来了,在IE8/IE9/chrome里面,怎么捣鼓,都没出什么问题~ 这个时候在ff里面也是正常的.然后发现在ie6里面父div的边框没了, ie7里面,第一个换行符前面的div跑到父div的外面...
复制代码代码如下: .main { clear: both; height: auto; margin: 0 auto; overflow: hidden; width: 980px; } .main_l { height: 270px; width: 360px; float: left; } .main_c { float: left; height: 270px; width...
clear: both; display: block; float: left; width: 104px; height: 20px; line-height: 20px; margin-right: 17px; font-size: .75em; text-align: right; } dd { position: relative; display: block; float: left...