1. 为什么要清除浮动?

    非IE下,当容器的高度为auto,容器有浮动元素,此时容器的高度不能自己伸长适应内容的高度,造成内容溢出乃至影响布局,即所谓的“浮动溢出”,为防此象,需要清除浮动。

  2. 如何清除浮动?

    这里只记录最好的一种方法,伪元素和ie 触发haslayout:

    .clearfix{zoom:1;}

    .clearfix:after{content:"x";display:block;height:0;clear:both;visibility:hidden;}

    a.给容器添加一个clearfix的class;

    b.给这个class添加一个:after伪元素实现添加看不见的块元素

 
注意:visibility:hidden和display:none的不同:
      前者:隐藏但是占位;
      后者:不显示不占位。

css2----清除浮动的更多相关文章

  1. 详解 清除浮动 的多种方式(clearfix)

    说明 本文适合知道HTML 与 CSS基础知识的读者,或者想要了解清除浮动背后原理的读者! 1.什么是浮动 首先我们需要知道定位 元素在页面中的位置就是定位,解决问题之前我们先来了解下几种定位方式 : ...

  2. 清除浮动元素的margin-top失效原因(更改之前的错误)

    //样式代码body,div{ margin:; padding:; } .box1{ background:#900; width:200px; height:200px; margin:20px ...

  3. 详说 CSS 清除浮动

    转自:http://kayosite.com/remove-floating-style-in-detail.html 浮动,从诞生那天起,它就是个特别的属性——既为网页布局带来新的方法,却又随之产生 ...

  4. css中的浮动与三种清除浮动的方法

    说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...

  5. float---浮动带来的影响与清除浮动带来的影响方法----在路上(20)

    使用float会带来哪些影响: 脱标:无行级块级之分: 相互贴靠:若想之间有空隙可用margin与padding: 顶边对齐: 文字环绕: 当使用float后,子标签脱离父标签,父标签就会失去高度,此 ...

  6. [html/css]清除浮动的相关技巧

    以前只了解得很浅显,转载了一篇不错的文,学习参考 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可 ...

  7. 前端之float的几种清除浮动方式

    前端之float的几种清除浮动方式 本节内容 1.float清除方式1 2.float清除方式2 3.float清除方式3 4.float清除方式4 1.float清除方式1 <!DOCTYPE ...

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

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

  9. CSS中清除浮动的两种方式

    在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...

  10. css清除浮动深度解析

    首先引入一个新的概念"包裹". float:left会使得该属性的作用容器包裹住其内部元素:那么还有么有其他属性能够产生类似于浮动这种包裹性? 答案是有的:像"浮动&qu ...

随机推荐

  1. Upload file

    <h3>Upload File</h3> <form action="@Url.Action("Upload","UploadCo ...

  2. CentOS配置SSH免密码登录后,仍提示输入密码

    CentOS配置SSH无密码登录需要3步: 生成公钥和私钥 导入公钥到认证文件,更改权限 测试 1.生成公钥和私钥 ssh-keygen -t dsa -P '' -f ~/.ssh/id_dsa 默 ...

  3. Map.Entry

    Map.Entry Map是java中的接口,Map.Entry是Map的一个内部接口. Map提供了一些常用方法,如keySet().entrySet()等方法,keySet()方法返回值是Map中 ...

  4. [课程设计]Scrum 2.7 多鱼点餐系统开发进度(下单一览页面-菜式添加功能的继续实现)

    Scrum 2.7 多鱼点餐系统开发进度  (下单一览页面-菜式添加功能的继续实现) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团 ...

  5. HTML5 aria- and role

    HTML5 aria-* and role 在video-js的demo中看到了很多aria-*,不知道干嘛的.google一下,发现aria的意思是Accessible Rich Internet ...

  6. python学习之认识字符串

    1.打印字符串 >>> print ("hello world") hello world 2.使用“/"进行符号转义 >>> pri ...

  7. 使用vs2013打开vs2015项目

    1.用记事本打开.sln,如图修改 2.用记事本打开.vcxproj文件,搜索:v140,修改为v120(有四个)

  8. 常用js总结1

    1.cookie.js(封装了cookie的基本操作) 1.引入cookie.js <script type="text/javascript" src="../j ...

  9. JDBC读取新插入Oracle数据库Sequence值的5种方法

    Oracle的sequence实现非常灵活,所以也带来一些易用性问题,如何取到新插入记录生成的sequence值与其它数据库有较大差别,本文详国介绍了5种实现读取新插入记录sequence值的方法. ...

  10. 【树莓派】使用树莓派制作img镜像(一)

    最近一直在折腾树莓派,前几天装了10台设备,最近又来了15台开发板子.基本每台设备都需要进行如下操作: 1.安装树莓派OS,并配置键盘.时区.语言编码格式等: 2.新增组.用户.配置静态IP地址: 3 ...