浮动是一个有意思(你也可以说它很麻烦)的CSS属性,任何元素设置了浮动,层级就提高了,会影响它后面没设置浮动的元素,这些倒霉的被影响者会跑到浮动层的下面去(当然IE6、IE7除外),那解决方法呢?

常用清楚浮动方法

1、对父级设置适合CSS高度

2、新建子元素,再clear:both清除浮动

3、给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动,另外在 IE6 中还需要触发 hasLayout ,例如为父元素设置容器宽高或设置 zoom:1。

4、父级设置display:inline-block;

5、使用CSS的:after伪元素

.clearfix:after {
  display: block;
  clear: both;
  height: 0;
  font-size: 0;
  content: '';
}

.clearfix {
  *zoom: 1;
}

6、精益求精方法:

.cf:before,.cf:after { 
  content:""; 
  display:table; 

.cf:after { clear:both; }/* For IE 6/7 (trigger hasLayout) */ 
.cf { zoom:1; }

详细好文章参考网址:http://www.jb51.net/css/67471.html

闭合浮动的方法css的更多相关文章

  1. 常用的CSS清除浮动的方法优缺点分析(个人学习笔记)

    一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer"> <div class="di ...

  2. css浮动布局,浮动原理,清除(闭合)浮动方法

    css浮动 1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的原理:使当前元素脱离普通流,相 ...

  3. CSS之浮动布局(float,浮动原理,清除/闭合浮动方法)

    css之浮动布局 本人博客:查看文章   1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的 ...

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

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

  5. css清除浮动float方法

    转载:http://www.cnblogs.com/ForEvErNoME/p/3383539.html 什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的 ...

  6. css浮动现象及清除浮动的方法

    css浮动现象及清除浮动的方法   首先先明确浮动最初的定义及使用场景:实现文本环绕图片的效果. 除了用浮动外,目前暂无其他方法实现文本环绕   再来看看浮动的具体定义: 浮动的框可以左右移动,直至它 ...

  7. CSS 教程 - 闭合浮动元素

    按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列. 因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素. 但是有时我 ...

  8. css清除浮动各方法与原理

    说到清除浮动的方法,我想网络上应该有不下7,8的方法,介绍这些方法之前,想下为什么清除浮动? 再次回到float这个属性,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联 ...

  9. CSS清除浮动float方法总结

    使用浮动造成的BUG: 使用浮动前:(子节点是将父节点撑开了) 代码如下 <div class="box"> <div class="d1"& ...

随机推荐

  1. linux arm-linux-gcc 安装编译

    1,将  .tgz  安装包通过SSH传至ubuntu 2,tar -zxvf  arm-linux-gcc.tgz     解压 3,配置环境变量(由于鄙人只需其中一个用户使用,所以直接再其主目录) ...

  2. 10.23JS日记

    1.逻辑运算 ||  &&  ! ||:遇到第一个为true的值就中止并返回 &&:遇到第一个为false的值就中止并返回,如果没有false值,就返回最后一个不是fa ...

  3. 21.Mysql Server优化

    21.优化Mysql Server21.1 Mysql体系结构概览Mysql由Mysql Server层和存储引擎层组成.Mysql实例由一组后台进程.一写内存块和若干服务线程组成.Mysql后台进程 ...

  4. js Map和Set

    Map Map是一组键值对的结构,具有极快的查找速度.JavaScript的对象有个小问题,就是键必须是字符串.但实际上Number或者其他数据类型作为键也是非常合理的.为了解决这个问题,最新的ES6 ...

  5. hdu 1198 (并查集 or dfs) Farm Irrigation

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1198 有题目图11种土地块,块中的绿色线条为土地块中修好的水渠,现在一片土地由上述的各种土地块组成,需要浇 ...

  6. oracle表或视图不存在和标识符无效的问题解决

    通过dbvisualizer修改表的名字时,一定要改成大写,否则会报错,数据库中没有该表的错误. 如果新的表名为小写,不行! select的时候,可以用小写名. 标识符无效解决:字段名默认都是大写的, ...

  7. tableView中cell的复用机制

    TableView的重用机制,为了做到显示和数据分离,IOS tableView的实现并且不是为每个数据项创建一个tableCell.而是只创建屏幕可显示最大个数的cell,然后重复使用这些cell, ...

  8. BZOJ2730 [HNOI2012]矿场搭建 - Tarjan割点

    Solution 输入中没有出现过的矿场点是不用考虑的, 所以不用考虑只有 一个点 的点双联通分量. 要使某个挖矿点倒塌, 相当于割去这个点, 所以我们求一遍割点和点双联通分量. 之后的点双联通分量构 ...

  9. MySQL中的联结表

    使用联结能够实现用一条SELECT语句检索出存储在多个表中的数据.联结是一种机制,用来在一条SELECT语句中关联表,不是物理实体,其在实际的数据库表中并不存在,DBMS会根据需要建立联结,且会在查询 ...

  10. read temperature

    button1, button2, richtexbox1, serialport1, using System;using System.Collections.Generic;using Syst ...