要想解决这个问题,很简单,设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...