<!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. VBS自编写脚本。（实现批量修改文件名且在执行前，备份原有文件夹中的文件）

    '=========================================================================='' VBScript Source File - ...

  2. DOM操作-引用同级的元素

    代码: ———————————————————————————————— <script type="text/javascript">            //获取 ...

  3. HDU2535:Vote

    Problem Description 美国大选是按各州的投票结果来确定最终的结果的,如果得到超过一半的州的支持就可以当选,而每个州的投票结果又是由该州选民投票产生的,如果某个州超过一半的选民支持希拉 ...

  4. uCGUI的文字与数值显示方法

    uCGUI的数值显示非常的灵活方便,是制作LCD界面非常好的选择. 文字与数值显示的方法: 常用文本显示函数: void GUI_DispStringAt(const char GUI_FAR *s, ...

  5. Android Studio 如何使用jni

    在project视图下,main文件夹下,创建jniLibs文件夹,然后把so文件放入即可:

  6. wpa_supplicant_8_ti hostapd wpa_supplicant TI 官方的wpa_supplicant hostapd 移植到linux

    在移植 wpa_supplicant_8_ti 的时候碰到很多头文件找不到.然后参考了下面的博客 http://blog.csdn.net/penglijiang/article/details/85 ...

  7. Zabbix3.0 客户端搭建

    zabbix客户端安装 我们这边使用编译安装 软件包版本 zabbix-3.0.3.tar.gz 添加用户组 #groupadd zabbix #useradd -s /sbin/nologin -g ...

  8. Python 协程/异步IO/Select\Poll\Epoll异步IO与事件驱动

    1 Gevent 协程 协程,又称微线程,纤程.英文名Coroutine.一句话说明什么是线程:协程是一种用户态的轻量级线程. 协程拥有自己的寄存器上下文和栈.协程调度切换时,将寄存器上下文和栈保存到 ...

  9. API CLOUD 快捷键

    常用快捷键有:Ctrl+Z:撤销Ctrl+N:创建项目或文件Ctrl+Shift+F:代码格式化(这个经常用,可以美化代码,也可以通过这个检查代码是否出错)Ctrl+/ :注释和反注释Alt+/:强制 ...

  10. ignite客户端找不到服务端的时候如何设置退出

    ignite启动客户端时需要有服务端支持: Ignition.setClientMode(true); Ignition.start("ignite.xml"); 这里有个问题,当 ...