文档章节

神奇的clear:right

临江若仙
 临江若仙
发布于 2014/06/15 14:11
字数 216
阅读 111
收藏 8


        其实,原因很简单,是加载顺序的问题,因为后面一个元素没有加载好,所以后面的元素不会受到clear:right的影响~

也就是前面元素在执行clear:right的时候,后面应该消失的元素还没有出现,所以计算不出要换行。

clearright
再配合overflow:hidden就可以搞定问题。

不要问我这个是为什么,我也不知道原因,谁知道跟我说下,我也是那里玩时偶然发现的。XD 代码在这里

<div class="wrapper">
<div class="sbox">Content</div>
<div class="sbox">Content</div>
</div>

.wrapper{
clear:both;
float:left;
width:150px;
border:3px #666 solid;
padding:3px;
background-color:#efefef;
}
.sbox{
/*clear:right;*/
float:left;
width:100px;
height:100px;
border:1px #000 solid;
background-color:#ccc;
}


© 著作权归作者所有

共有 人打赏支持
临江若仙
粉丝 6
博文 27
码字总数 12524
作品 0
广州
高级程序员
私信 提问
加载中

评论(1)

许雷神
许雷神
回去试试看
div+css布局之float与clear的用法

CSS Float Layout Basics - CSS浮动布局基础:基于浮动的布局利用了float(浮动)属性来并排定位元素,并在网页上创建列。可以利用这个属性来创建一个环绕在周围的效果,例如环绕在照片周围,...

oecp
2011/06/10
0
1
问几个css问题,在w3school还是不太理解。

img{ float: right; clear: right;} 第一个是设置右边浮动元素,例如在右侧显示一张图 ,第二个clear是什么意思?在w3school cn 的解释是“clear 属性规定元素的哪一侧不允许其他浮动元素。”...

Helloall
2014/07/29
224
3
8种CSS清除浮动的方法优缺点分析

为什么清除CSS浮动这么难? 因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及 width height 属性。 而且同样的代码,在各种浏览器中显示效果也有可能不相同,...

菜鸟的进阶
2017/10/21
0
0
Div+Css布局教程(-)CSS必备知识

目录: 1、Div+Css布局教程(-)CSS必备知识 注:本教程要求对html和css有基础了解。 一、CSS布局属性 Width:设置对象的宽度(width:45px)。 Height:设置对象的高度(Height:45px;)。 Back...

城固如春
2016/11/12
3
0
CSS中clear:both的理解

在CSS中我们会经常要用到“清除浮动”Clear,比较典型的就是clear:both; CSS手册上是这样说明的:该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。...

dhb_oschina
2013/08/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Qt那些事0.0.9

关于QThread,无F*k说的。文档说的差不多,更多的是看到很多人提到Qt开发者之一的“你TM的做错了(You're doing it wrong...)”,这位大哥2010年写的博客,下面评论很多,但主要还是集中在2...

Ev4n
12分钟前
0
0
constructor / destructor

_attribute__表示属性,是Clang提供的一种源码注释,方便开发者向编译器表达诉求,一般以__attribute__(*)的方式出现在代码中。为了方便使用,一些常用属性被定义成了宏,经常出现在系统头文...

HeroHY
13分钟前
0
0
大数据教程(7.6)shell脚本定时采集日志数据到hdfs

上一篇博客博主分享了hadoop内置rpc的使用案例,本节博主将为小伙伴们分享一个在实际生产中使用的日志搜集案例。前面的文章我们有讲到过用户点击流日志分析的流程,本节就是要完成这个分析流...

em_aaron
41分钟前
1
0
wave和pcm互转

wav->pcm pcm->wav c#代码: using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;using System.IO;using Sys......

whoisliang
43分钟前
1
0
Win10:默认的图片打开应用,打开图片时速度明显很慢的解决办法

首先,我们随便地打开一张图片。然后,点击右上角的三个小点,最后点击弹出菜单最下面的“设置”。如下图: 在“设置”中找到下面的“人物”,把它关掉就好了。 原来,默认情况下,Win 10的图...

LivingInFHL
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部