<!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. Windows API 之 FormatMessage

    FormatMessage Formats a message string. The function requires a message definition as input. The mes ...

  2. VS2008中Run-Time Check Failure #2 - Stack around the variable 'xxx' was corrupted 错误解决方法

    问题 : 在用VS2008写一段代码,算法都没有问题,但是调试的时候发现出了main之后就报 Stack around the variable 'xxx' was corrupted 的错误,后来发 ...

  3. JavaScript高级程序设计：第十七章

    错误处理与调试 一.错误处理 1.try-catch语句: ECMA-262第3版引入了try-catch语句,作为javascript中处理异常的一种标准方式.基本的语法如下: try { //可能 ...

  4. JVM 设置

    按照基本回收策略分 引用计数(Reference Counting) 标记-清除(Mark-Sweep) 复制(Copying) 标记-整理(Mark-Compact) 按分区对待的方式分 增量收集( ...

  5. 还在纠结 Flux 或 Relay，或许 Redux 更适合你

    重磅消息,Redux 1.0 发布,终于可以放心用于生产环境了! 在这个端应用技术膨胀的时代,每天都有一大堆框架冒出,号称解决了 XYZ 等一系列牛 X 的问题,然后过一段时间就不被提起了.但开发的应 ...

  6. The project target (Android 6.0) was not properly loaded或者The rendering target (Android 6.0) is still loading.

    第一步:在project上右键选择Properties,然后选择Android, 然后在Project Build Target那里选择其他的Target试试: 第二步: 我选了6.0之后,就有菜单可 ...

  7. PHP正则表达式试题

    1.POSIX正则表达式扩展在PHP哪个版本被废弃了 2.请写出匹配任意数字,任意空白字符,任意单词字符的符号? 3.执行一个正则表达式匹配的函数是什么?返回的结果有哪些? 4.执行一个全局正则表达式 ...

  8. C、C++的Makefile的编写以及动、静态库的制作调用（包括MAC地址的获取及MD5加密）

    一.C代码 静态库 四个.h.c文件 add.h #ifndef ADD_H #define ADD_H int add(int a,int b); #endif add.c #include < ...

  9. 打不开BT,一直重复的关闭开启。

    /bt-btif (25335): ...preload_wait_timeout (retried:0/max-retry:1)...D/bt_userial(25335): RX terminat ...

  10. J2EE判断重复的数据

    import java.util.ArrayList; import java.util.List; import org.junit.Test; /** * 判断重复的数据 * @author Ya ...