1. “清除浮动” ？？准确的描述应该是“清除浮动造成的影响”  学习浮动推荐的视频教程《CSS深入理解之float浮动》

2.如何清除浮动造成的影响？？？

栗子 块级div元素包含一个内联img元素，此时div的高应该是图片img撑开的高度，当设置了图片img元素设置浮动后，div高度就会坍塌

浮动的破坏性 浮动导致高度坍陷代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>如何清除浮动造成的影响</title>

</head>

<body>

    <div style=" background-color:#CBD6EA; padding:5px;" >

        <img src="img/item_05.png" width="50px" style="float:left;">

    </div>

</body>

</html>

3.包裹性/float浮动/position:absolute定位

a.首先的说明包裹性，因为具有包裹性的元素都可以清除浮动造成的影响

b.对于float浮动 包裹性 对于一个块级block元素，div默认宽度100%，设置float:left/right后，其宽度表现为内容的宽度

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>利用float: left清除浮动造成的影响</title>

    <style type="text/css">

        .box {

            background-color:#CBD6EA;

            padding:5px;

            float: left;

        }

    </style>

</head>

<body>

    <div class="box">

        <img src="img/item_05.png" width="50px">

    </div>

</body>

</html>

c.对于absolute绝对定位 包裹性 对于一个块级block元素，div默认宽度100%，设置position:absolute后，其宽度表现为内容的宽度

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>利用position: absolute清除浮动造成的影响</title>

    <style type="text/css">

        .box {

            background-color:#CBD6EA;

            padding:5px;

            position: absolute;

        }

    </style>

</head>

<body>

    <div class="box">

        <img src="img/item_05.png" width="50px">

    </div>

</body>

</html>

综合上述说明 无论是float浮动或是absolute绝对定位最终都向display:inline-block靠拢

4.几种“清除浮动造成的影响”解决方案

方案一.利用display:inline-block清除浮动

（说明 对于display:inline-block（块级内联元素，可以想象成冰水混合物）而言，无论 是块级block元素还是inline元素，使用了该属性后，block元素体现为内容的宽度，自左向右排列，

inline元素体现为可以像块级元素那样设置宽高 ）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>利用inline-block清除浮动造成的影响</title>

    <style type="text/css">

        .box {

            background-color:#CBD6EA;

            padding:5px;

            display: inline-block;

        }

    </style>

</head>

<body>

    <div class="box">

        <img src="data:images/item_05.png" width="50px" style="float:left;">

    </div>

</body>

</html>

方案二.对于 overflow:hidden的包裹性（或可靠的迫使父元素包含浮动的子元素）,设置了overflow:hidden属性使得坍陷div有了高度

overflow:hidden另一个作用是超大的子内容会被容器剪切掉

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>利用position: absolute清除浮动造成的影响</title>

    <style type="text/css">

        .box {

            background-color:#CBD6EA;

            padding:5px;

            overflow: hidden;/*清除父容器高度坍塌*/

        }

    </style>

</head>

<body>

    <div class="box">

        <img src="img/item_05.png" width="50px" style="float:left;">

    </div>

</body>

</html>

方案三.对于zoom的包裹性,比例缩放，跟CSS3中transform:scale类似; 已经不能清除浮动

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>利用position: absolute清除浮动造成的影响</title>

    <style type="text/css">

        .box {

            background-color:#CBD6EA;

            padding:5px;

            zoom: 1;

        }

    </style>

</head>

<body>

    <div class="box">

        <img src="img/item_05.png" width="50px" style="float:left;">

    </div>

</body>

</html>

 方案四.使用伪类:after + zoom方法，清除浮动<推荐方法>

.clearfix{*zoom:1;}

.clearfix:after{display:block; content:'clear'; clear:both;height: 0; line-height: 0; font-size: 0;visibility:hidden;}
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>利用position: absolute清除浮动造成的影响</title>

    <style type="text/css">

        .box {

            background-color:#CBD6EA;

            padding:5px;

        }

        /*推荐方法*/

        .clearfix{*zoom:1;}  /*IE6/IE7*/

        .clearfix:after{display:block; content:'clear'; clear:both; height: 0; line-height: 0; font-size: 0;visibility:hidden;}

    </style>

</head>

<body>

    <div class="box">

        <img src="img/item_05.png" width="50px" style="float:left;">

    </div>

</body>

</html>

【资料参考 】

http://www.zhangxinxu.com/wordpress/2010/01/对overflow与zoom清除浮动的一些认识/

float包裹性与破坏性及清除浮动几种方法的更多相关文章

  1. CSS清除浮动八种方法

    在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下 清除浮动是每一个 web前台设 ...

  2. 基础总结（01）--css清除浮动几种方法

    1.父元素添加overflow:auto/hidden; 2.父元素内加空div,添加样式clear:both; 3.父元素添加伪类; .parent:after{ content:''; displ ...

  3. 定位网页元素、透明度、z-index、包裹性和破坏性

    一.定位 position属性————规定元素的定位类型,即元素脱离文档流的布局,在页面的任意位置显示 也可以参见以前的总结 <—— 戳 static:默认值,没有定位 relative:相对定 ...

  4. CSS清除浮动8大方法

    CSS清除浮动是每一位web前端工程师都要掌握的技术,也是让每一位刚入门的前端工程师感到头疼的问题, 下面就来讲一下CSS清除浮动的原理和各种解决方法,大家可以根据实际情况选择最佳的解决方案. 在用D ...

  5. css清除浮动的处理方法

    根据<精彩绝伦的css> <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  6. css清除浮动的八大方法

    清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的 ...

  7. css清除浮动的集中方法

    一:浮动产生的副作用 1.父元素的背景不能显示 2.父元素的边框不能撑开 3.padding和margin失效 二:清除浮动的方法 1.给父元素设置高度:这样可以清除浮动,但是子元素内容高度不固定,这 ...

  8. CSS给元素清除浮动影响的方法，--最全四种方法

    代码实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  9. css 清楚浮动三种方法

    我们可以看到这样一个布局: <style> .left{ width: 200px; height: 200px; background-color: #00ee00; float: le ...

随机推荐

  1. CefSharp初识--把网页移到桌面

    在开发中我们可曾有过这样的需求,将某个网页嵌入到.Net应用中来,但Winform自带的web browser不怎么理想.CefSharp可以让我们在.Net应用中嵌入一个Chromium.它提供了W ...

  2. 2013 duilib入门简明教程 -- VS环境配置(2)

        既然是入门教程,那当然得基础点,因为搜索duilib相关资料时,发现有些小伙伴到处都是编译错误,以及路径配置错误等等,还有人不知道SVN,然后一个个文件手动下载的.     其实吧,duili ...

  3. jQuery第二篇 （帅哥）

    1.1 jQuery操作DOM jQuery课程的目标:学会使用jQuery设计常见效果 选择器 基本选择器:#id ..class .element.* . 层级选择器: 空格.>.+.~ 基 ...

  4. 使用Event Message 对 Package 进行Troubleshoot

    在SSIS Server上,发现一个Package Job运行异常,该Package处于僵死状态.从 Job Activity Monitor中看到该Job一直处于运行状态,但是,DW中没有执行任何Q ...

  5. hudson部署过程

    hudson部署过程: java安装 http://developer.51cto.com/art/201504/470683.htm tomcat安装 http://blog.csdn.net/hu ...

  6. wireshark常用的过滤器设置

     过滤源ip.目的ip.在wireshark的过滤规则框Filter中输入过滤条件.如查找目的地址为192.168.101.8的包,ip.dst==192.168.101.8:查找源地址为ip.src ...

  7. r.js结合gulp等于webpack（angular为例）

    本人大学时玩dojo,开始了AMD模块化的不归路,工作后一直使用requirejs,感觉非常好.但是,近来随着react的火热,webpack成为了天下无敌的模块化工具,能做模块化,合并压缩,监视等, ...

  8. mysql乐观锁总结和实践--转

    原文地址:http://chenzhou123520.iteye.com/blog/1863407 上一篇文章<MySQL悲观锁总结和实践>谈到了MySQL悲观锁,但是悲观锁并不是适用于任 ...

  9. [C#]浅析ref、out参数

    转载:http://www.cnblogs.com/vd630/p/4601919.html#top 按引用传递的参数算是C#与很多其他语言相比的一大特色,想要深入理解这一概念应该说不是一件容易的事, ...

  10. UIScrollView的delaysContentTouches与canCencelContentTouches属性

    UIScrollView有一个BOOL类型的tracking属性,用来返回用户是否已经触及内容并打算开始滚动,我们从这个属性开始探究UIScrollView的工作原理: 当手指触摸到UIScrollV ...