<!DOCTYPE html>

<html>

<head>

    <link rel="stylesheet" href="index.css" />

</head>

<div class="db group"> <!-- 在含有float的容器中家group class-->

    <div id="l" style="width:100px; height: 100px; background: red;"></div>

    <p>to left</p>

</div>

<div id="c">

    <div  style="width:100px; height: 100px; background: blue;"></div>

    <p>Not float</p>

</div>

</html>
#l{

    float:left;

}

#c{

    border: 1px solid yellow;

}

.db{

    border: 1px solid aqua;

}

.group:before,

.group:after{

    content: "";

    display: table;

}

.group:after{

    clear: both;

}

.group{

    zoom: ;

}

-----------------------Ex-----------------------

<!doctype html>

<html lang="en">

  <head>

    <title>Sven's Snowshoe Emporium</title>

    <link rel="stylesheet" href="style.css" />

  </head>

  <body>

    <nav>

      <ul>

        <li><a href="#">Home</a></li>

        <li><a href="#">About</a></li>

        <li><a href="#">Contact</a></li>

      </ul>

    </nav>

    <section class="content home group">

      <aside>

        <p>Did you know that Sven's Snowshoe Emporium produces the highest quality snowshoes in North America? <a href="#">Find out more</a>.</p>

      </aside>

      <article>

        <h3>New Fall Styles</h3>

        <p>Be the first at your resort to sport the hot new tennis-themed snow kicks, now available in the <a href="#">store</a>.</p>

      </article>

    </section>

  </body>

</html>
nav li {

  float: left;

}

aside {

  float: right;

  width: 120px;

}

article {

  float: left;

  width: 120px;

}

/* clearfix */

.group:before,

.group:after {

  content: "";

  display: table;

}

.group:after {

  clear: both;

}

.group {

  zoom:;

}

[CSS3]Clearfix的更多相关文章

  1. 总结30个CSS3选择器

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...

  2. CSS3与页面布局学习总结（六）——CSS3新特性（阴影、动画、渐变、变形、伪元素等）

    CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档. 一.阴影 1.1.文字阴影 text-shadow&l ...

  3. CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法

    一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...

  4. CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  5. CSS3鼠标滑过动画线条边框特效

    基于CSS属性animation动画制作,效果流畅弹性十足 效果展示 http://hovertree.com/texiao/css3/32/ 源码下载:http://hovertree.com/h/ ...

  6. 总结30个CSS3选择器（转载）

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...

  7. 实用的CSS3属性和使用技巧

    CSS可以改进网站的设计并且开拓网站设计更多的可能性,可以令你的网页更具吸引力.对于前端开发者.网站设计师来说,掌握并熟练应用CSS是一项必不可少的技能. 下面列出了一些非常实用的CSS3属性和使用技 ...

  8. css3全屏背景图片切换特效

    效果体验:http://hovertree.com/texiao/css3/10/ 一般做图片切换效果,都会使用JS或者jQuery脚本,今天发现,其实只用CSS也可以实现.试试效果吧. 效果图: 代 ...

  9. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

随机推荐

  1. 【原创】实战padding oracle漏洞

    首先关于padding oracle漏洞的原理请看: 步入正传~~ 搭建漏洞利用环境Perl 环境下载地址:链接:http://pan.baidu.com/s/1skFxVm1 密码:anuw 首先查 ...

  2. Windows安装绿色版git管理软件GitStack 2.3.8

    1.原来 GitStack  是安装在局域网的,为了更好开展工作,迁移到公网的服务器.(安全性未知) 2.公网服务器已经在运行一个 Apache 2.4 (占用80端口): 3.GitStack 2. ...

  3. PYQT窗口风格

    setWindowFlags(Qt.WindowFlags)函数,Qt.WindowFlags类如下: 1.窗口类型 Qt.Qt.Widget#插件默认窗口,有最小化.最大化.关闭按钮 Qt.Qt.W ...

  4. Pycharm报错解决：error:please select a valid Python interpreter

    问题描述: 之前PC上安装的是Python2,后来工作需要转成Python3了.然后在用pycharm运行Python2的程序时发现源程序运行报错(出去语法错误) error:please selec ...

  5. 前些日子用css画的大白

    闲来无事用css画的一个大白...其实有一些地方偷懒了用svg去画的,因为用纯几何形状组合去画变化那么复杂的曲线不太现实.但svg曲线坐标还是自己一点点调出来的,没有用工具生成. ps:点击身体的某些 ...

  6. 怎样在MyEclipse上耍Chrome

    近期在忙着期末大作业,所以Windows App和算法的专栏都没有更了,随后这几天都会陆续開始更新的,欢迎大家的关注啦-- 在写期末大作业的时候遇到一个问题.一个新的特性在MyEclipse自带的浏览 ...

  7. web语义化，从松散到实战

    GitHub:http://liu12fei08fei.github.io/html/4semantic.html web语义化,从松散到实战 在这篇文章之前,我放弃了很多次,写关于语义化方面的文章: ...

  8. ASP.NET MVC中的Session以及处理方式

    最近在ASP.NET MVC项目中碰到这样的情况:在一个controller中设置了Session,但在另一个controller的构造函数中无法获取该Session,会报"System.N ...

  9. java多线程实现主线程等待子线程执行完问题

    本文介绍两种主线程等待子线程的实现方式,以5个子线程来说明: 1.使用Thread的join()方法,join()方法会阻塞主线程继续向下执行. 2.使用Java.util.concurrent中的C ...

  10. 实现工资的按天统计(X:日期 Y:姓名)

    案例:工人工资按天按班别存入数据库,想实现一根据部门及员工姓名还有日期的汇总表... 汇总表效果如下: 还可以根据XY坐标对应的值查询显示该日期的明细记细 2013-09-06升级(如是当月最多只能显 ...