都知道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. VS2010/MFC对话框：向导对话框的创建及显示

    向导对话框的创建及显示 本节将为大家演示如何创建向导对话框. 仍然以前面的“加法计算器”的例子为基础,在其中加入向导对话框,我们可以用它来说明加法计算器的使用方法,一步一步引导用户操作,这也是比较常见 ...

  2. 关于oracle spfile配置文件问题

    $ORACLE_SID决定spfile dbs 默认 在启动Oracle数据库时报错,如下: [oracle@localhost ~]$ sqlplus / as sysdba SQL*Plus: R ...

  3. How to get the xpath by clicking an html element

    How to get the xpath by clicking an html element How to get the xpath by clicking an html element

  4. nefu 462 fib组合

    nefu 462 fib组合 (斐波那契数列的通项公式以及推倒过程) 分类: 数学2014-05-21 10:27 190人阅读 评论(0) 收藏 举报 题目链接:http://acm.nefu.ed ...

  5. JAVA学习第一课（初识JAVA）

    PS:退ACM集训队了,自己也疯玩了两天,后天就开学了,就正式大二了,该收收心好好学习啦                                                         ...

  6. 实验记录一 初步接触cortex-M3

    应该说老早就在接触cortex-M3了.曾经没想到会接触嵌入式,结果由于导师的缘故.在选择项目管理时,就呵呵了.不废话.搭配环境非常easy,纯粹傻瓜式.可由于自己的马虎,却让自己一直困惑. 记得在前 ...

  7. Android 调用相册 拍照 实现系统控件缩放 切割图片

    android 下如果做处理图片的软件 可以调用系统的控件 实现缩放切割图片 非常好的效果 今天写了一个demo分享给大家. package cn.m15.test; import java.io.B ...

  8. BZOJ 1207: [HNOI2004]打鼹鼠( dp )

    dp.. dp[ i ] = max( dp[ j ] + 1 ) ------------------------------------------------------------------ ...

  9. [NOIP2013提高组] CODEVS 3287 火车运输(MST+LCA)

    一开始觉得是网络流..仔细一看应该是最短路,再看数据范围..呵呵不会写...这道题是最大生成树+最近公共祖先.第一次写..表示各种乱.. 因为要求运输货物质量最大,所以路径一定是在最大生成树上的.然后 ...

  10. php中0,空,null和false的区别

    <? $str1 = null; $str2 = false; echo $str1==$str2 ? ‘相等’ : ‘不相等’; $str3 = ""; $str4 = 0 ...