上代码：

<!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. linux下socket编程-TCP

    网络字节序 发送主机通常将发送缓冲区中的数据按内存地址从低到高的顺序发出,接收主机把从网络上接到的字节依次保存在接收缓冲区中,也是按内存地址从低到高的顺序保存,因此,网络数据流的地址应这样规定:先发出 ...

  2. 浏览器的重绘repaints与重排reflows深入分析

    重绘是一个元素外观的改变所触发的浏览器行为,浏览器会根据元素的新属性重新绘制,使元素呈现新的外观,接下来将详细介绍,需要了解的朋友可以参考下: 在项目的交互或视觉评审中,前端同学常常会对一些交互效果质 ...

  3. Android studio运行时报错，方法，类找不到，或者JVM内存溢出解决方案

    Error:Execution failed for task ':app:dexDebug'. > com.android.ide.common.process.ProcessExceptio ...

  4. 存储、读取——Android应用程序内置的文件夹

    1.将数据存储到应用程序的文件夹,并读写 Context提供了两个方法,打开应用程序文件夹的I/O,若文件不存在则创建 FileInputStream openFileInputStream(Stri ...

  5. 用python开发简单ftp程序

    根据alex老师视频开发的简单ftp程序,只能实现简单的get功能 ftp客户端程序: #!/usr/bin/env python #_*_ coding:utf-8 _*_ import socke ...

  6. Zabbix监控Linux主机设置

          说明: Zabbix监控服务端已经配置完成,现在要使用Zabbix对Linux主机进行监控. 具体操作: 以下操作在被监控的Linux主机进行,这里以CentOS 6.x系统为例. 一.配 ...

  7. CocoaPods的安装及安装出现问题的处理

    ocoaPods安装分两步:第一步.修改本机的Ruby环境:第二步.安装. 第一步:步骤1.打开终端输入   gem sources -l   查看本机的Ruby环境:若显示“https://ruby ...

  8. UVA - 10098 - Generating Fast （枚举排列）

    思路:生成全排列,用next_permutation.注意生成之前先对那个字符数组排序. AC代码: #include <cstdio> #include <cstring> ...

  9. css3 翻转和旋转的差别

    我曾经一直以为旋转跟翻转一样,今日自己旋转了好久都发觉跟翻转差一点点,纠结了十几分钟才明确,仅仅能怪自己的立体感太差了. css3中的transform中有旋转,放缩,倾斜,平移的功能,分别相应的属性 ...

  10. 业务需求那些事，使用WCF如何实现业务需求！

    最近遇到一个新项目,需要与硬件结合,进行读取信息并保存在数据库中.业务要求也在昨天发布一个问题,当然感谢许多园内的朋友出谋划策,截图有真相! 关于这个问题,我做了如下假设.目前处于测试状态,代码比较简 ...