对 clear:both 这个样式的一些理解
看下我今天一直研究的两个例子吧。希望对自己跟大家有帮助:
例子一:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.clearfix:after{
visibility: hidden;
display: block;
font-size: 0;
content: ".";
clear: both;
height: 0;
}
</style>
</head>
<body>
<div style="border:2px solid red;">
<div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
<div style="clear:both;"></div>
</div> <div style="height: 10px">
</div> <div class="clearfix" style="border: 2px solid red;">
<div style="float: left;width:80px;height: 80px;border:1px solid blue;">TEST DIV</div>
</div> </body>
</html>
<div style="clear:both;"></div> 与 class="clearfix" 这个的作用是一样的,让父类的div展开。
Clear:both;其实就是利用清除浮动来把外层的div撑开。你可以将上面的其中一个去掉,看下效果。
所以有时候,我们在将内部div都设置成浮动之后,就会发现,外层div的背景没有显示,原因就是外层的div没有撑开,太小,所以能看到的背景仅限于一条线。 例子二:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
font-family: Tahoma, Geneva, Helvetica, sans-serif !important;
color: #000 !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
background-color: #fff !important;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}/* 作用: 与<div style="clear: both"></div>相同,将外层的div撑开 */
</style>
</head>
<body> <div style="background-color: #f5fafe;width: 500px;height: 300px;margin: 20px 20px"> <!--最外层div-->
<div style="padding: 50px 40px 40px 80px"> <!--用户名/密码的承载层,定义距离父层的距离-->
<div style="padding: 20px 20px;"> <!--用户名/密码层之间的空间间隔-->
<div style="float: left;width: 20%;text-align: right;"><label>用户名:</label></div> <!--浮动20%-->
<div style="float: left;position: relative"> <!--与下面children层进行position匹配-->
<div><input /></div> <!--定义标签以及错误已经样式-->
<div style="position: absolute;font-size: 8px;color:#ff0000;background: #FFEBEB;height: 15px;line-height: 15px;width: 100%">用户名不能为空</div>
</div>
<div style="clear: both"></div> <!--将外层的div撑开,与class='chearfix'作用相同-->
</div> <div class="clearfix" style="padding: 20px 20px;">
<div style="float: left;width: 20%;text-align: right;"><label>密码:</label></div>
<div style="float: left;position: relative">
<div><input type="password"/></div>
<div style="position: absolute;font-size: 8px;color:#ff0000;background: #FFEBEB;height: 15px;line-height: 15px;width: 100%">密码不能为空</div>
</div>
</div>
</div> </div> </body>
</html>
例子一有参考:http://blog.sina.com.cn/s/blog_4a3789a70100jfv4.html
对 clear:both 这个样式的一些理解的更多相关文章
- css样式表的理解
全拼Cascading Style Sheete 美化html网页 1分为 内联样式表 和html联合显示 内嵌样式表 在单独区域内嵌,必须在head 外部样式表 需建一个css文件,保存并附加 2选 ...
- Python 读取word中表格数据、读取word修改并保存、替换word中词汇、读取word中每段内容,读取一段话中相同样式内容,理解Document中run
from docx import Document path = r'D:\pywork\12' # word信息表所在文件夹 w = Document(path + '/' + 'word信息表.d ...
- css样式 float的理解
float w3cSchool里解释说, 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样 ...
- [css]【转载】CSS样式分离之再分离
原文链接:http://www.zhangxinxu.com/wordpress/2010/07/css%E6%A0%B7%E5%BC%8F%E5%88%86%E7%A6%BB%E4%B9%8B%E5 ...
- 转载:Clear Float
众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除浮动,那么有浮动元素的父元素容器将元素将无法自动撑 开.换句简单好理解的话来说,假如你在写CODE时,其中div ...
- 浏览器默认样式及reset
写在前面 首先纠正一个易错概念.div并非生来就是块元素,而是每个浏览器都有一套默认的css样式(优先级最低),默认样式里会把div设置成display: block;还有margin,padding ...
- 我对CSS vertical-align的一些理解与认识(一)
一.关于今天,本文,及其他 今天是个特殊的日子,因为今天是汶川地震两周年的日子,我很悲鸣:今天又是国际护士节,看到微博上护士照横流,我很欣慰. 一段放松的YY后,进入正题.上个月21号,有位同行留言想 ...
- 附加题-stack的理解
这次的附加题推荐的博客是http://www.ruanyifeng.com/blog/2013/11/stack.html阮一峰的,感觉讲的深入浅出,比较适合对计算机刚刚接触的人: 下面谈谈感想: 这 ...
- WS_CLIPCHILDREN和WS_CLIPSIBLINGS的理解(转载)
1.1 WS_CLIPCHILDREN WS_CLIPCHILDREN样式从字面上可以理解成ClipChildren,裁减子窗口. MSDN里的E文解释:Excludes the area occup ...
随机推荐
- C++的隐式类型转换与转换操作符
C++标准允许隐式类型转换,即对特定的类,在特定条件下,某些参数或变量将隐形转换成类对象(创建临时对象).如果这种转换代价很大(调用类的构造函数),隐式转换将影响性能.隐式转换的发生条件:函数调用中, ...
- 图片Exif 信息中Orientation的理解和对此的处理
这个问题是在用七牛上传图片后获取宽高时发现的,一张图片,用图片浏览器打开始终是竖图,但是查看属性或者用七牛获取宽高,却发现宽大于高,也就是在属性中这是个横图.这样导致客户端用该宽高来展示图片会出现问题 ...
- Run Loop详解
Run loops是线程的基础架构部分.一个run loop就是一个事件处理循环,用来不停的调配工作以及处理输入事件.使用run loop的目的是使你的线程在有工作的时候工作,没有的时候休眠. Run ...
- OAF_开发系列09_实现OAF预提取LOV设定(案例)
20150712 Created By BaoXinjian
- 代码管理 – SVN
代码管理工具也用了不少年了,整理下. 管理工具比较 用过VSS,CVS,TFS,SVN还有一个微软内部使用的不记得什么名字了.这里进行一些简单比较,重点介绍SVN的用法. CVS历史悠久,1986年就 ...
- CentOS7:配置SVN服务器
1. 安装 CentOS通过yum安装subversion. $ sudo yum install subversion subversion安装在/bin目录: $ which svnserve / ...
- [源码]DataIOStream 数据流 处理基本数据类型的流
纵骑横飞 章仕烜 首先我们来看一下 DataOutputStream /** * A data output stream lets an application write primit ...
- 因为此控件已在 web.config 中注册并且与该页位于同一个目录中
在web.config文件配置了用户控件 <pages> <controls> <add tagPrefix="my" tagName="l ...
- HTML5服务器推送消息的各种解决办法
摘要 在各种BS架构的应用程序中,往往都希望服务端能够主动地向客户端推送各种消息,以达到类似于邮件.消息.待办事项等通知. 往BS架构本身存在的问题就是,服务器一直采用的是一问一答的机制.这就意味着如 ...
- FreeRadius服务器安装以及error while loading shared libraries问题
服务器安装过程: 1. Down from www.freeradius.org 我下载的版本是freeradius-server-2.1.8.tar.gz 2. tar zx ...