<!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. 翻译-你必须知道的28个HTML5特征、窍门和技术

    摘自by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1058 前端的发 ...

  2. Opencv2系列学习笔记10(提取连通区域轮廓) 另一个

    http://blog.csdn.net/lu597203933/article/details/17362457 连通区域指的是二值图像中相连像素组成的形状.而内.外轮廓的概念及opencv1中如何 ...

  3. hdu_1253_胜利大逃亡(bfs+剪枝)

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=1253 题意:三维BFS,不解释 题解:DFS+剪枝会超时,裸BFS会超时,BFS+剪枝才能AC,有点伤 ...

  4. angular、bootstrap初稿搭建

    1.bootstrap3.0中,ie8不兼容响应式设计 @media,需要添加如下2个查件 <!-- html5.js for IE less than 9 -->     <!-- ...

  5. MyBatis 返回新增数据的自增id

    <insert id="save" parameterType="Vote" useGeneratedKeys="true" keyP ...

  6. idea控制台输出乱码

    找到安装目录bin下面的idea64.exe.vmoptions,打开后在最后一行增加 -Xms128m -Xmx750m -XX:MaxPermSize=350m -XX:ReservedCodeC ...

  7. Automatic Trading

    Automatic Trading A brokerage firm is interested in detecting automatic trading. They believe that a ...

  8. Toy Storage POJ 2398

    题目大意:和 TOY题意一样,但是需要对隔板从左到右进行排序,要求输出的是升序排列的含有i个玩具的方格数,以及i值. 题目思路:判断叉积,二分遍历 #include<iostream> # ...

  9. 无线手柄+步进电机——控制方向

    今天测试了一下无线手柄控制电机转向的改变 1: #include <PS2X_lib.h> //for v1.6 2: #include <Stepper.h> 3:  4: ...

  10. servlet中路径的获取

    1.获取项目的绝对路径 可以request.getRealPath("/"),但是这个方法已经废弃了,最好用this.getServletContext().getRealPath ...