上代码：

<!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. 一个周末掌握IT前沿技术之node.js篇

    一个周末掌握IT前沿技术之node.js篇 http://ittechnical.sinaapp.com/node-js-and-restful-api/ NodeJS入门  http://www.n ...

  2. javascript中this,call,apply详解

    javascript是一门解释型的语言,与很多面向对象语言相比有着不同特性,所以不能用面向对象的原理来理解this这个关键字. 在JS中,要真正理解this倒底指向哪个对象,必须先了解JS的作用域和原 ...

  3. jQuery 随滚动条滚动效果 （适用于内容页长文章）

    直接入题! 当内容页比较长的时候,网站右侧一直是空白,不如放点有用的东西给用户看,最好不要放广告,因为那样很邪恶,你懂的. 好吧,昨天写了这个东西,jQuery滚动随动区块,代码如下: //侧栏随动 ...

  4. 如何修改Struts2 FiledError样式

    有时候,使用Struts2的<s:fielderror />标签还是比较好的.但是这个标签本来的样式实在很难看,不但换行,而且有个大大的黑点.一看就知道用了<ui><li ...

  5. Oracle EBS-SQL (WIP-11):检查期间任务完工记录数.sql

    select        WE.WIP_ENTITY_NAME                 任务名称,        WDJ.class_code                         ...

  6. Android技术宅：自制USB OTG数据线

    作为一名Android技术宅,USB OTG是你必须了解的,所谓USB OTG就是你可以利用手机或平板上用来充电.与电脑传输数据的micro USB接口来连接其他USB外设,如游戏手柄.鼠标.键盘.U ...

  7. layout_weight 的解释及使用

    layout_weight 的解释及使用 转自:http://my.oschina.net/jsan/blog/191492 在Android的控件布局中,有一个奇葩的 layout_weight 属 ...

  8. 触发按钮改变panel面板上的小圆圈颜色

    import javax.swing.*; import java.awt.event.*; import java.awt.*; public class TouChaCol implements ...

  9. poj3650---将一个字符串中的特定字符转换

    #include <stdio.h> #include <stdlib.h> #include<string.h> int main() { ]; int i; w ...

  10. string和整数转换

    tostring(int) fromstring(string ) c++11新方式 stod Convert string to double (function template ) stold ...