<!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

         <style>

             .box{

                 border: 1px solid red;

                 overflow: hidden;<!--
相当于子太大父亲包不住，overflow：scroll是滚动条-->             }

             .item{

                 width: 200px;

                 height: 200px;

                 background-color: black;

                 float: left;

             }

         </style>

         <!--

             清除浮动的方法

             1、加高度 (扩展性不好)

             2、给父级加浮动 (页面中所有元素都加浮动，margin左右自动失效（floats bad ！）)

             3、.inline-block 清浮动方法 (margin左右auto失效)

             4、空标签清除浮动 (IE6 最小高度 19px；（解决后IE6下还有2px偏差）)

             5、.br清浮动    (不符合工作中：结构、样式、行为，三者分离的要求)

         -->

     </head>

     <body>

         <div class="box">

             <div class="item"></div>

         </div>

     </body>

 </html>

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

  1. float清除浮动

    清除浮动: 在非IE浏览器下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响 ...

  2. 转载 | float 清除浮动的7种方法

    什么叫浮动:浮动会使当前标签脱离文档流,产生上浮的效果,同时还会影响周边元素(前后标签)及父级元素的位置和width,height属性.下面用一个小例子来看一看浮动的全过程:1.首先我们新建一个网页, ...

  3. CSS float清除浮动

    解决高度塌陷的问题 – 清除浮动 CSS中有个讨论较多的话题就是如何清除浮动,清除浮动其实就一个目的,就是解决高度塌陷的问题.为什么会高度塌陷?什么时候会高度塌陷?塌陷原因是:元素含有浮动属性 – 破 ...

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

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

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

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

  6. float包裹性与破坏性及清除浮动几种方法

    1. “清除浮动” ??准确的描述应该是“清除浮动造成的影响”  学习视频录制推荐的教程<CSS深入理解之float浮动> 2.如何清除浮动造成的影响??? 栗子 块级div元素包含一个内 ...

  7. css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？一起来$('.float')

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

  8. 解决float浮动带来的父元素高度没有的问题---清除浮动

    float的特性 : 1:使元素block块级化: 2:破坏性造成的紧密排列特性. 基于以上的特性,使得我们通常把浮动用来布局,带来的问题是,容易出问题,重用性不行,ie6-的版本下很多问题,因为它是 ...

  9. 【转】CSS清除浮动_清除float浮动

    CSS清除浮动方法集合 一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 浮动产生样式效果截图 ...

  10. float浮动与清除浮动

    浮动: 浮动的框可以左右移动,直到它的边缘碰到包含框或另一个浮动框的边框为止.文档的普通流中的块框会当浮动框不存在一样.但会影响内联框(通常是文本)的排列. 属性值有:left,right,none; ...

随机推荐

  1. mybatis结合redis实战二级缓存（六）

    之前的文章中我们意见分析了一级缓存.二级缓存的相关源码和基本原理,今天我们来分享下了mybatis二级缓存和redis的结合,当然mybatis二级缓存也可以和ehcache.memcache.OSC ...

  2. nginx源码学习资源

    http://www.cnblogs.com/yjf512/archive/2012/06/13/2548515.html nginx源码学习是一个痛苦又快乐的过程,下面列出了一些nginx的学习资源 ...

  3. DOM操作-动态创建网页元素

    动态创建新的DOM元素,是JavaScript操作网页对象模型的重要手段之一 代码: <!DOCTYPE html> <html> <head> <title ...

  4. 通过CSS实现各种方向的三角形

    #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid tr ...

  5. cmstop传递什么控制器和方法---就实例化该控制器

    object顶级类class object 第一级抽象类controllerabstract class controller extends object 第二级抽象类controller_abst ...

  6. split a string in C++

    This is my favourite way to iterate through a string. You can do what you want per word. string line ...

  7. Go-new和make

    new返回指向struct的指针,new仅分配内存,而不对对象的值进行初始化 make返回到strcut的对象,而不是指针,只能创建map,slice,channel对象 make([]string, ...

  8. shell编程之服务脚本编写，文件锁以及信号捕获

    shell脚本编程是linux运维工程师必备的技能,也是非常重要的一个技能,所以把shell编程学好,只有好处.基础语法我也就不讲了,学过C语言这些语言的,稍微看一下就能明白shell编程的基础,所以 ...

  9. kvm and virtualbox running side by side

    http://dedoimedo.com/computers/kvm-virtualbox.html

  10. 【转】Git代码行统计命令集

    http://blog.csdn.NET/dwarven/article/details/46550117 http://blog.csdn.net/hshl1214/article/details/ ...