浮动是一个有意思(你也可以说它很麻烦)的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. pycharm 配置支持vue

    http://www.cnblogs.com/c-x-m/p/9229199.html

  2. opencv 3.2安装

    opencv 3.2安装 下载地址: https://sourceforge.net/projects/opencvlibrary/files/opencv-win/3.2.0/opencv-3.2. ...

  3. hdu 5475(2015上海网赛) An easy problem

    题目;http://acm.hdu.edu.cn/showproblem.php?pid=5475 题意就是给X赋初值1,然后给Q个操作,每个操作对应一个整数M:如果操作是1则将X乘以对应的M,如果是 ...

  4. Vsphere初试——使用Vsphere client

    好不容易安装好ESXi之后,就要安装一个Vsphere Client,为什么要安装这个东东.使用过vmware workstation的人都知道,安装完就可以添加虚拟机,但是ESXi要通过Vspher ...

  5. Eclipse生成部署描述符(web.xml)

    右键点击你的web项目名--->Java EE Tools-->Generate Deployment  Descriptor Stub 要想自动生成,只需在创建web项目时,把最后一页的 ...

  6. start()方法和run()方法有什么区别?

    通过调用线程类的start()方法来启动一个线程,使线程处于就绪状态,即可以被JVM来调度执行,在调度过程中,JVM通过调用线程类的run()方法来完成实际的业务逻辑,当run()方法结束后,此线程就 ...

  7. 我们最常见的UX设计交付成果有哪些?

    以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器. 有人会好奇,用户体验(UX)设计师每天都在做些什么呢?说实话,有很多事情!作为UX专家,需要将自己的设计 ...

  8. openssl pem密钥文件rsa加密解密例子

    准备工作 命令行加密解密,用与比对代码中的算法和命令行的算法是否一致 C:\openssl_test>openssl rsautl -encrypt -in data.txt -inkey pu ...

  9. [C#]RichTextBox实现拖放

    amespace WindowsFormsApplication1 { public partial class Form1 : Form { public Form1() { InitializeC ...

  10. GUI的优化操作/添加背景图片等

    一.背景图片的添加这是JAVA中添加背景图片的方式,基本思路先建立一个Label标签,然后建立一个层次的布局,将label标签添加到最下面去. ImageIcon image=new ImageIco ...