文档章节

神奇的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
CSS中clear:both的理解

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

dhb_oschina
2013/08/15
0
0
Div+Css布局教程(-)CSS必备知识

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

城固如春
2016/11/12
3
0

没有更多内容

加载失败,请刷新页面

加载更多

70.shell的函数 数组 告警系统需求分析

20.16/20.17 shell中的函数 20.18 shell中的数组 20.19 告警系统需求分析 20.16/20.17 shell中的函数: ~1. 函数就是把一段代码整理到了一个小单元中,并给这个小单元起一个名字,当用到这段...

王鑫linux
今天
2
0
分布式框架spring-session实现session一致性使用问题

前言:项目中使用到spring-session来缓存用户信息,保证服务之间session一致性,但是获取session信息为什么不能再服务层获取? 一、spring-session实现session一致性方式 用户每一次请求都会...

WALK_MAN
今天
5
0
C++ yield()与sleep_for()

C++11 标准库提供了yield()和sleep_for()两个方法。 (1)std::this_thread::yield(): 线程调用该方法时,主动让出CPU,并且不参与CPU的本次调度,从而让其他线程有机会运行。在后续的调度周...

yepanl
今天
4
0
Java并发编程实战(chapter_3)(线程池ThreadPoolExecutor源码分析)

这个系列一直没再写,很多原因,中间经历了换工作,熟悉项目,熟悉新团队等等一系列的事情。并发课题对于Java来说是一个又重要又难的一大块,除非气定神闲、精力满满,否则我本身是不敢随便写...

心中的理想乡
今天
33
0
shell学习之获取用户的输入命令read

在运行脚本的时候,命令行参数是可以传入参数,还有就是在脚本运行过程中需要用户输入参数,比如你想要在脚本运行时问个问题,并等待运行脚本的人来回答。bash shell为此提 供了read命令。 ...

woshixin
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部