文档章节

神奇的clear:right

临江若仙
 临江若仙
发布于 2014/06/15 14:11
字数 216
阅读 112
收藏 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
246
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
Clear Text Fields

Clear Text Fields allows you to right click form text inputs and clear their contents. This is handy for Linux/X11 users who want to clear a form element but don't want it's con......

匿名
2008/09/19
481
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周一乱弹 —— 白掌柜说了卖货不卖身

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @爱漫爱 :这是一场修行分享羽肿的单曲《Moony》 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :开不开心? 开心呀, 我又不爱睡懒觉…...

小小编辑
今天
7
0
大数据教程(11.7)hadoop2.9.1平台上仓库工具hive1.2.2搭建

上一篇文章介绍了hive2.3.4的搭建,然而这个版本已经不能稳定的支持mapreduce程序。本篇博主将分享hive1.2.2工具搭建全过程。先说明:本节就直接在上一节的hadoop环境中搭建了! 一、下载apa...

em_aaron
今天
2
0
开始看《JSP&Servlet学习笔记》

1:WEB应用简介。其中1.2.1对Web容器的工作流程写得不错 2:编写Servlet。搞清楚了Java的Web目录结构,以及Web.xml的一些配置作用。特别是讲了@WebServlet标签 3:请求与响应。更细致的讲了从...

max佩恩
今天
4
0
mysql分区功能详细介绍,以及实例

一,什么是数据库分区 前段时间写过一篇关于mysql分表的的文章,下面来说一下什么是数据库分区,以mysql为例。mysql数据库中的数据是以文件的形势存在磁盘上的,默认放在/mysql/data下面(可...

吴伟祥
今天
3
0
SQL语句查询

1.1 排序 通过order by语句,可以将查询出的结果进行排序。放置在select语句的最后。 格式: SELECT * FROM 表名 ORDER BY 排序字段ASC|DESC; ASC 升序 (默认) DESC 降序 1.查询所有商品信息,...

stars永恒
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部