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

例子一：

<!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. python---set集合

    集合(set)是一个无序不重复元素的序列. #!/usr/bin/python3 student = ({'Tom', 'Jim', 'Mary', 'Tom', 'Jack', 'Rose'}) p ...

  2. dispatch_set_target_queue 说明

    参照:http://blog.csdn.net/growinggiant/article/details/41077221 http://codingobjc.com/blog/2013/05/07/ ...

  3. MyBatis与Spring整合

    1.单独使用MyBatis 单独使用MyBatis,不结合其他框架,主要步骤是: 1.创建SqlSessionFactory对象 创建方法是通过SqlSessionFactoryBuilder这个类从 ...

  4. 用Python向MySQL数据库插入数据

    最近一直在学习MySQL数据库,很感兴趣.这次我做了一个简单的尝试,使用Python3.4与MySQL数据库进行交互,将一份从雪球网上下载的某股票数据上传至MySQL数据库.仅为初学者提供参考,高手请 ...

  5. vue.js 2.0开发(2)

    如果我们想实时的显示我们todos的长度这个业务逻辑可以这样: <h1>{{message}} ({{todos.length}})</h1> 直接展示todos的length ...

  6. Git使用培训

    1.VS“扩展和更新”菜单,NuGet 2.通过“扩展和更新”,联机搜索git,安装“Git Extensions”和“Git Source Control Provider” 3.通过Git命令配置 ...

  7. Retina Display and Eclipse Mac视网膜屏和Eclipse

    I have a Retina Display and Eclipse looks blurry. How can I fix it? You need to tell Mac OS that Ecl ...

  8. JavaScript的学习5

    一.DOM对象 1.DOM对象:Document  Object  Model  文档对象模型,主要是用来提供了操作HTML文档的属性与方法 2.DOM的分类: a.核心DOM:为操作XML和HTML ...

  9. 64位.net调用32位com服务（c++）

    说明: 因64位.net无法调用32位dll,才采用调用进程外com形式. 该项目必须为release时编译才不会报错. 项目调用时,添加引用->com中找到该com服务,添加即可. 部署: 启 ...

  10. Oracle数据库监听服务无法启动

    (1) 安装好Oracle后,启动Net Manager,测试orcl失败,报错“ORA-12514: TNS: 监听程序当前无法识别连接描述符中请求的服务”,需要修改监听文件.修改前: # list ...