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

例子一：

<!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. 擦掉STM32F429芯片上的数据的一个方法

    刚入手一块STM32F429Discovery.手痒痒的,准备写个程序进去.一不小心,把MCU的调试接口SW.JTAG全部给禁用了.这下可坏了,写不进去程序,擦不掉数据.愁的某家一头大汗.突然想起了当 ...

  2. 开源共享一个训练好的中文词向量（语料是维基百科的内容，大概1G多一点）

    使用gensim的word2vec训练了一个词向量. 语料是1G多的维基百科,感觉词向量的质量还不错,共享出来,希望对大家有用. 下载地址是: http://pan.baidu.com/s/1boPm ...

  3. Windows安装Node.Js

    1.下载https://nodejs.org/ 2.安装 3.修改环境变量,添加安装的Node.js的目录(此处似乎可以不用配置) 4.查看npm指令 关于npm介绍“Nodejs自身提供了基本的模块 ...

  4. PHP取整函数:ceil,floor,round,intval的区别详细解析

    floor -- 舍去法取整说明float floor ( float value ) 返回不大于 value 的下一个整数,将 value 的小数部分舍去取整.floor() 返回的类型仍然是 fl ...

  5. 自己写的基于bootstrap风格的弹框插件

    自己写的一款基于bootstrap风格的弹框插件,暂时只有确认框.提示框.后续功能扩展.bug修改再更新. ;(function($){ //默认参数 var PARAMS; var DEFAULTP ...

  6. IEnumerable<T>与IQueryable<T>以及.net的扩展方法

    首先看看继承关系 public abstract class DbSet : DbQuery public abstract class DbQuery : IOrderedQueryable, IQ ...

  7. php三维数组去重

    假设叫数组 $my_array; // 新建一个空的数组. $tmp_array = array(); $new_array = array(); // 1. 循环出所有的行. ( $val 就是某个 ...

  8. web.py学习心得

    1.注意判断数字时,如果是get传递的参数,一定要用int转换.不然出错. 2.$var 定义时,冒号后的内容不是python内容,需加上$符号.如$var naviId:$naviId. 3.各个模 ...

  9. 【转】easyui $.message.alert 点击右上角的关闭按钮时，不执行定义的回调函数

    今天發現這個問題 easyui  $.message.alert  点击右上角的关闭按钮时,不执行定义的回调函数

  10. javascript type操作

    var a; type a;//结果为undefined type b;//结果也是undefinedalert(a);//弹出undefinedalert(b);//错误代码  上述代码,type ...