<!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. Codeforces Round #364 (Div. 2) C.They Are Everywhere

    C. They Are Everywhere time limit per test 2 seconds memory limit per test 256 megabytes input stand ...

  2. LeetCode OJ 141. Linked List Cycle

    Given a linked list, determine if it has a cycle in it. Follow up:Can you solve it without using ext ...

  3. TFS 创建分支

    1 2 3 4

  4. ENC28j60以太网芯片驱动程序简介

    ENC28j60以太网芯片驱动程序简介 ENC28J60 驱动开发要点 enc28J60 和 Arduino (1)——ping通你的Arduino MCU51单片机uIP协议栈+ENC28J60网卡 ...

  5. java memcache应用

    import java.io.Serializable; import java.text.DateFormat; import java.util.Date; import java.util.Ma ...

  6. 扩展方法where方法查询不到数据，不会抛异常，也不是返回的null

    如题,“扩展方法where方法查询不到数据,不会抛异常,也不是返回的null”,示例代码如下: Product类: public class Product { private string name ...

  7. ssh登录nat模式的VMware虚拟机

    有时候本地PC是固定IP上网方式且无多余IP,而我们又希望使用putty登陆VMware中的虚拟机且虚拟机可以上外网,那么这时候就可以使用端口映射. 1.本地环境简述 本地PC IP:192.168. ...

  8. 7--OC中NSLog函数输出格式详解

    OC中NSLog函数输出格式详解 • %@ 对象 • %d, %i 整数 • %u 无符整形 • %f 浮点/双字 • %x, %X 二进制整数 • %o 八进制整数 • %zu size_t • % ...

  9. Linux学习 -- Shell基础 -- Bash基本功能

    历史命令 history -c   clear -w   写入 ~/.bash_history 默认保存1000条, 可在/etc/profile中修改 调用 Tab补全 命令.目录.文件 命令别名 ...

  10. Vim编辑器的使用和基本配置

    三种模式 1 命令模式 插入 a i o A I O 定位 gg G :n nG ngg $ 0 删除 x nx dd ndd dG 复制和剪切 yy-p dd-p 替换 r R 撤销和恢复 u Ct ...