看下我今天一直研究的两个例子吧。希望对自己跟大家有帮助：

例子一：

<!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 这个样式的一些理解的更多相关文章

  1. css样式表的理解

    全拼Cascading Style Sheete 美化html网页 1分为 内联样式表 和html联合显示 内嵌样式表 在单独区域内嵌,必须在head 外部样式表 需建一个css文件,保存并附加 2选 ...

  2. Python 读取word中表格数据、读取word修改并保存、替换word中词汇、读取word中每段内容，读取一段话中相同样式内容，理解Document中run

    from docx import Document path = r'D:\pywork\12' # word信息表所在文件夹 w = Document(path + '/' + 'word信息表.d ...

  3. css样式 float的理解

    float w3cSchool里解释说, 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样 ...

  4. [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 ...

  5. 转载：Clear Float

    众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除浮动,那么有浮动元素的父元素容器将元素将无法自动撑 开.换句简单好理解的话来说,假如你在写CODE时,其中div ...

  6. 浏览器默认样式及reset

    写在前面 首先纠正一个易错概念.div并非生来就是块元素,而是每个浏览器都有一套默认的css样式(优先级最低),默认样式里会把div设置成display: block;还有margin,padding ...

  7. 我对CSS vertical-align的一些理解与认识（一）

    一.关于今天,本文,及其他 今天是个特殊的日子,因为今天是汶川地震两周年的日子,我很悲鸣:今天又是国际护士节,看到微博上护士照横流,我很欣慰. 一段放松的YY后,进入正题.上个月21号,有位同行留言想 ...

  8. 附加题-stack的理解

    这次的附加题推荐的博客是http://www.ruanyifeng.com/blog/2013/11/stack.html阮一峰的,感觉讲的深入浅出,比较适合对计算机刚刚接触的人: 下面谈谈感想: 这 ...

  9. WS_CLIPCHILDREN和WS_CLIPSIBLINGS的理解(转载)

    1.1 WS_CLIPCHILDREN WS_CLIPCHILDREN样式从字面上可以理解成ClipChildren,裁减子窗口. MSDN里的E文解释:Excludes the area occup ...

随机推荐

  1. Date和Calendar时间操作常用方法及示例

    package test; import java.text.SimpleDateFormat;import java.util.Calendar;import java.util.Date; /** ...

  2. Asp.Net调试方法备忘

    由于种种原因导致vs不能启用Web服务器调试.可用如下方法来执行调试. 1.在vs中选择 调试>启动不调试(ctr+f5), 2.设置你需调试的相关断点,然后选择 调试>进程.选择Aspn ...

  3. 扫描二维码自动识别手机系统（Android/IOS）

    移动互联网发展迅速,各种APP的开发都会推出多个版本(多终端),比如:iPhone版.iPad版.Android版.有些APP还会考虑覆盖到多个国家(国际化),比如:中文版.英文版.日文版.韩文版等. ...

  4. git服务器新增仓库

    在已有的git库中搭建新的库,并将本地的git仓库,上传到服务器的git库中,从而开始一个新的项目. 首先是在本地操作: 在本地新建文件夹spider,进入到spider中:如下

  5. iOS开发 － OC － 实现本地数据存储的几种方式一

    iOS常用的存储方式介绍 在iOS App开发过程中经常需要操作一些需要持续性保留的数据,比如用户对于App的相关设置.需要在本地缓存的数据等等.本文针对OC中经常使用的一下存储方式做了个整理. 常用 ...

  6. LeetCode 350. Intersection of Two Arrays II

    Given two arrays, write a function to compute their intersection. Example:Given nums1 = [1, 2, 2, 1] ...

  7. 整整十年 － Agent Framework for TypeScript 2.0

    十年前,我发布了 Agent Framework for .NET 2.0 今天,Agent 又开始了新的旅程, 这次支持的语言是 TypeScript 2.0 上需求:init函数只能被调用一次 废 ...

  8. jQuery MiniUI开发系列之：Ajax处理超时、服务端错误

    MiniUI所有组件的ajax交互,均使用标准.成熟的jQuery.ajax. 依赖于jquery ajax组件的完善性,我们可以拦截住每一次ajax请求处理. 比如,拦截ajax返回数据前,判断返回 ...

  9. SQL存储过程-新增和修改,参数Xml数据类型

    输入参数:xml数据类型  功能:新增和修改  --value() 方法从 XML 中检索 rogue 属性值.然后将该值分配给 int 变量. --将 Member 节点拆分成多行 SELECT T ...

  10. Java的常用对象①②

    Java的常用对象① Java的常用对象有很多,这里只对lang包中常用的Object,Date(Calendar,DateFormat,Math),System,Runtime进行介绍.㈠Objec ...