文档章节

神奇的clear:right

临江若仙
 临江若仙
发布于 2014/06/15 14:11
字数 216
阅读 111
收藏 8
点赞 0
评论 1


        其实,原因很简单,是加载顺序的问题,因为后面一个元素没有加载好,所以后面的元素不会受到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
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
javascript 使用css属性

盒子标签和属性对照 CSS语法(不区分大小写) JavaScript语法(区分大小写) border border border-bottom borderBottom border-bottom-color borderBottomColor border-bottom-style borde......

xiaoxin
2014/06/04
0
0
CSS Float(浮动)

什么是CSS Float(浮动)? CSS的Float(浮动),元素可以围绕其他元素向左或向右被推动 Float(浮动),往往是用于图像,但它在布局时一样非常有用。 元素怎样浮动 元素的水平方向浮动意味着元素只...

wybo521
2016/01/17
21
0
JS 设置 CSS 样式 对照

盒子标签和属性对照 CSS语法 (不区分大小写)   JavaScript语法 (区分大小写) border   border border-bottom   borderBottom border-bottom-color   borderBottomColor border-bott...

TreasureWe
2016/07/11
20
0
围住浮动元素的三种方法

方法一:为父元素添加 overflow:hidden 第一个方法很简单,缺点是不太直观,即为父元素应用 overflow:hidden ,以强制它 包围浮动元素。 方法二:同时浮动父元素 第二种促使父元素包围其浮动...

nibilly
2015/10/19
56
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Android 复制和粘贴功能

做了一回搬运工,原文地址:https://blog.csdn.net/kennethyo/article/details/76602765 Android 复制和粘贴功能,需要调用系统服务ClipboardManager来实现。 ClipboardManager mClipboardM...

她叫我小渝
21分钟前
0
0
拦截SQLSERVER的SSL加密通道替换传输过程中的用户名密码实现运维审计(一)

工作准备 •一台SQLSERVER 2005/SQLSERVER 2008服务 •SQLSERVER jdbc驱动程序 •Java开发环境eclipse + jdk1.8 •java反编译工具JD-Core 反编译JDBC分析SQLSERVER客户端与服务器通信原理 SQ...

紅顏為君笑
38分钟前
4
0
jQuery零基础入门——(六)修改DOM结构

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,可能补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 在《零基础入门JavaScript》的时...

JandenMa
55分钟前
0
0
linux mint 1.9 qq 安装

转: https://www.jianshu.com/p/cdc3d03c144d 1. 下载 qq 轻聊版,可在百度搜索后下载 QQ7.9Light.exe 2. 去wine的官网(https://wiki.winehq.org/Ubuntu) 安装 wine . 提醒网页可以切换成中...

Canaan_
今天
0
0
PHP后台运行命令并管理运行程序

php后台运行命令并管理后台运行程序 class ProcessModel{ private $pid; private $command; private $resultToFile = ''; public function __construct($cl=false){......

colin_86
今天
1
0
数据结构与算法4

在此程序中,HighArray类中的find()方法用数据项的值作为参数传递,它的返回值决定是否找到此数据项。 insert()方法向数组下一个空位置放置一个新的数据项。一个名为nElems的字段跟踪记录着...

沉迷于编程的小菜菜
今天
1
1
fiddler安装和基本使用以及代理设置

项目需求 由于开发过程中客户端和服务器数据交互非常频繁,有时候服务端需要知道客户端调用接口传了哪些参数过来,这个时候就需要一个工具可以监听这些接口请求参数,已经接口的响应的数据,这种...

银装素裹
今天
0
0
Python分析《我不是药神》豆瓣评论

读取 Mongo 中的短评数据,进行中文分词 对分词结果取 Top50 生成词云 生成词云效果 看来网上关于 我不是药神 vs 达拉斯 的争论很热啊。关于词频统计就这些,代码中也会完成一些其它的分析任...

猫咪编程
今天
0
0
虚拟机怎么安装vmware tools

https://blog.csdn.net/tjcwt2011/article/details/72638977

AndyZhouX
昨天
1
0
There is no session with id[xxx]

参考网页 https://blog.csdn.net/caimengyuan/article/details/52526765 报错 2018-07-19 23:04:35,330 [http-nio-1008-exec-8] DEBUG [org.apache.shiro.web.servlet.SimpleCookie] - Found......

karma123
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部