上代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css 清除浮动 兼容IE+, FF</title>
<style type="text/css">
.clearfix {
  *zoom;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
  line-height;
}
.clearfix:after {
  clear: both;
}
.fl {
    float: left;
}
.box {
    border: 1px solid #F00;
    width: 320px;
    height: 150px;
    margin: 5px;
}

</style>
</head>

<body>
<div class="clearfix" style="border:1px solid #00F;">
  <div class="fl box"></div>
  <div class="fl box"></div>
</div>
<div class="box"></div>
</body>
</html>

css 清除浮动 兼容IE+, FF的更多相关文章

  1. 【转】css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？

    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...

  2. css清除浮动float的几种方法

    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 这里我没有给最外层的DIV.outer 设置高度, ...

  3. css清除浮动的方法汇总

    这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录. 引用地址 : http://www.cnblogs.com/ForEvErNoME/p/3383539.html ------------- ...

  4. css清除浮动定位造成的异常

    清除浮动是为了解决高度塌陷的问题:内层有好几个div有宽有高,并且选择了浮动定位,但是外层的div却并没有设置宽高.在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动( ...

  5. 【转】CSS清除浮动_清除float浮动

    CSS清除浮动方法集合 一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 浮动产生样式效果截图 ...

  6. 什么是CSS清除浮动？

    在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外 ...

  7. CSS清除浮动的方法

    CSS清除浮动的方法有哪些呢?经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一.下面看今天的 ...

  8. CSS清除浮动各种方法

    当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象.这个现 ...

  9. css清除浮动float

    css清除浮动float 1.分析HTML代码 <div class="outer"> <div class="div1">1</ ...

随机推荐

  1. mvc的视图中显示DataTable的方法

    mvc的视图中显示DataTable的方法: 不断的循环画出table @{ ViewBag.Title = "ShowDataTable"; } @using System.Da ...

  2. C#l连接OPC进行数据交互

    步骤 :引用 OPCNETAPI.DLL&&OPCNETAPI.COM.DLL 1.查询服务器      2. 连接服务器  3. 读取数据     4.写入数据 1.查询服务器 :根 ...

  3. WPF那些事儿

    概述 感觉学习的东西必须做个记录,不然很快就忘掉了.现在把WPF学习过程中一些零碎的东西记录在下面,没有具体的主题,想到啥.看到啥都写在这里,算是复习一下并做个备忘吧. 1. 等待对话框 看到同事做的 ...

  4. 基于TcpDump和pcap文件分析的Android平台网络抓包程序设计与实现【随便】

    一.考虑使用Tcpdump,将抓到的包保存到cap文件中,然后手动分析.参考资料:1. http://www.cnblogs.com/tt-0411/archive/2012/09/23/269936 ...

  5. JavaScript总结之鼠标划过弹出div单击出现对话框

    为了满足他们的永无止境的要求,我可谓是任劳任怨啊,累断了双手,看瞎了双眼.这个是来写鼠标划过一个按钮,然后弹出一个小提示框解释,另外根据radio是否选中,判断点击后如何执行,然后执行之后再有一个确认 ...

  6. PHP面试题之文件目录操作

    获取文件后缀,遍历目录层次 /** * 5种方式获取文件后缀名 * 这道题其实就是考函数substr() strrchr() array_pop() strrpos() strpos() strrev ...

  7. Java之线程的生命周期

    在Java中,线程有5中不同状态,分别是:新建(New).就绪(Runable).运行(Running).阻塞(Blocked)和死亡(Dead).它们之间的转换图如下: 上图有一个例外,调用yiel ...

  8. C++ dynamic_cast实现原理

    dynamic_cast是一个操作符,其用法不再赘述.查看汇编码可以发现实际调用的是这个函数__RTDynamicCast,其内部实现如下: rtti.h: #pragma once extern & ...

  9. C语言的本质（3）——整数的本质与运算

    C语言的本质(3)--整数的本质与运算 计算机存储的最小单位是字节(Byte),一个字节通常是8个bit.C语言规定char型占一个字节的存储空间.如果这8个bit按无符号整数来解释,则取值范围是0~ ...

  10. nodejs学习笔记-1

    nodejs入门-安装 nodejs是什么,刚接触了一段时间,我自己也说不清楚它.按我个人的简单理解,nodejs就是一个javascript的解析器,它让javascript不在局限于浏览器客户端. ...