都知道float会脱离文档流  用什么办法撑开父元素呢？ 手动在本区块的所有float元素之后加上一个块元素并对其添加clear:both

可以 但是这样还要再去修改html页面  而且多了一个仅仅是为了控制布局却没有实际表现意义的元素  不好..

将float的父元素也设定为float  这样会导致更深的问题

将父元素设为overflow:hidden 很不错的办法 推荐！  但是我希望内部的元素能够超出 怎么弄呢？

用伪类！只需要修改css  就能向html中添加一个元素啦！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <title>Untitled Document</title>

        <style type="text/css">

        .root{

            margin: 0 auto;

            margin-top: 20px;

            margin-bottom: 50px;

        }

        .pos{

        }

        .fl{

            width: 300px;

            height: 200px;

            float: left;

            background-color: lime;

        }

        .fl2{

            background-color: black;

        }

        .pos:after{

            /*这5个属性缺一不可*/

            content: '.';

            visibility: hidden;

            clear: both;

            display: block;

            height: 0px; /*如果没有这个 容器会比float元素行多出一行字的高度*/

        }

        </style>

    </head>

    <body>

        <div class='root'>

        <div class='pos'>

            <div class='fl'></div>

            <div class='fl fl2'></div>

        </div>

        </div>

    </body>

</html>

clear伪类使用的更多相关文章

  1. CSS 伪类 (Pseudo-classes)

    CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接 本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. ...

  2. web之css伪类

    利用伪类清楚浮动: 代码: <!DOCTYPE html> <htmllang="en"> <head> <metacharset=&qu ...

  3. 【转载】CSS 伪类-:before和:after

    :before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素,最基本的用法如下: #example:before { conte ...

  4. css 伪类::after ::beftor 的使用方式

    注释:对于 IE8 及更早版本中的 :before,必须声明 . ::before和::after这两个主要用来给元素的前面或后面插入内容,这两个常用"content"配合使用,见 ...

  5. CSS3 选择器——伪类选择器

    前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...

  6. CSS3选择器（三）之伪类选择器

    伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总 结一下CSS中常用的伪类选择器的使用方法,最后把重心放 ...

  7. :before 和 :after 的内幕 以及伪类 ( 转 )

    原文链接    http://www.cnblogs.com/zhujl/archive/2012/05/08/2489411.html ------------------------------- ...

  8. 关于伪类元素:before和:after

    关于伪类元素:before和:after   CSS中存在一些比较特殊的属性,称之为伪类,它们之中最常用的就是定义链接的伪 :link:未被访问状态 :visited:已被访问状态 :hover:鼠标 ...

  9. CSS 高级：尺寸、分类、伪类、伪元素

    CSS 尺寸:允许你控制元素的高度和宽度.同样,还允许你增加行间距. CSS 分类:允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的 ...

随机推荐

  1. 害人的VS2008,manifest导致“应用程序配置不正确，应用程序未能启动”

    在VC++2008的项目中,如何显示地指定要使用的C++库的版本? 开发环境:VS2008 SP1 + Win2003 SP2         因为我的VS2008安装了SP1补丁,所以有了9.0.3 ...

  2. C# 保留小数点后两位（方法总结）

    最简单使用: float i=1.6667f; string show=i.ToString("0.00"); //结果1.67(四舍五入) 其他类似方法: string show ...

  3. Java图形化界面设计——布局管理器之FlowLayout（流式布局）

    一.布局管理器所属类包 所属类包 布局管理器名称 说明 Java.awt FlowLayout(流式布局) 组件按照加入的先后顺序按照设置的对齐方式从左向右排列,一行排满到下一行开始继续排列 Bord ...

  4. Linux特殊权限：SUID、SGID、SBIT

    SUID:      只对二进制程序有效      执行者对于程序需要有x权限      在程序运行过程中,执行者拥有程序拥有者的权限      例如:      普通用户执行passwd命令.   ...

  5. 浅析linux中的fork、vfork和clone

    各种大神的混合,做个笔记. http://blog.sina.com.cn/s/blog_7598036901019fcg.html http://blog.csdn.net/kennyrose/ar ...

  6. hdoj 1052 Tian Ji -- The Horse Racing【田忌赛马】 【贪心】

    思路:先按从小到大排序, 然后从最快的開始比(如果i, j 是最慢的一端, flag1, flag2是最快的一端 ),田的最快的大于king的 则比較,如果等于然后推断,有三种情况: 一:大于则比較, ...

  7. 通过jstack定位在线执行java系统故障_案例1

    问题描写叙述: 在一个在线执行的java web系统中,会定时执行一个FTP上传的任务,结果有一天发现,文件正常生成后却没有上传. 问题初步分析: 1.查看日志文件 发现这个任务仅仅打印了開始进入FT ...

  8. javascript 的工具方法 --- 类型判断

    Javascript中常见类型对象有: Boolean, Number, String, Function, Array, Date, RegExp, Object, Error, Symbol等等. ...

  9. <精华篇>：iOS视频大全-持续更新

    注意:新浪微博分享的资料和简书分享的资料,略有不同! 小码哥swift3.0版 斗鱼项目视频:点击下载  iOS开发25个项目实战:点击下载 2016PHP全套下载:点击下载  黑马刀哥iOS视频精选 ...

  10. ThinkPHP第十八天(Widget类的使用，连贯操作where IN用法，缓存S函数使用)

    1.Widget类的使用方法: 第一步:在Action同级目录中新建Widget文件夹(独立分组需要自己建立) 第二步:根据不同功能在Widget文件夹中建立不同的Widget类,如热门文章HotWi ...