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清除浮动_清除float浮动

    CSS清除浮动方法集合 一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 浮动产生样式效果截图 ...

  2. CSS清除浮动_清除float浮动

    2.clear:both清除浮动为了统一样式,我们新建一个样式选择器CSS命名为“.clear”,并且对应选择器样式为“clear:both”,然后我们在父级“</div>”结束前加此di ...

  3. CSS清除float浮动

    一.浮动产生原因   -   TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在 ...

  4. 清除float浮动三种方式

    Float的作用? w3c的官方解释: Content flows down the right side of a left-floated box and down the left side o ...

  5. div标签清除float浮动样式方法

    方法一. 这个方法来源于positioniseverything ,通过after伪类实现,完全兼容当前主流浏览器. 1 <style type="text/css"> ...

  6. 消除float浮动的影响

    一. 在父元素中当前浮动元素下面添加一个空的div 添加clear属性 <div style="displya:none;clear: left;"></div& ...

  7. CSS清除浮动_清除float浮——详解overflow:hidden 与clear:both属性

    最近刚好碰到这个问题,看完这个就明白了.写的很好,所以转载了! CSS清除浮动_清除float浮动 CSS清除浮动方法集合 一.浮动产生原因   -   TOP 一般浮动是什么情况呢?一般是一个盒子里 ...

  8. 对css float 浮动的学习心得

    css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...

  9. 边框，元素居中，盒子模型，margin,display,overflow,textarea,float,浮动停止条件，清除浮动影响，margin-top的bug，清除默认样式

    边框 solid实线 dotted虚线 dashed点线 盒子在页面中实际的宽高都是5部分组成 宽=borderleft+paddingleft+width+paddingright+borderri ...

随机推荐

  1. DOM入门。

    DOM  Document Object Model  文档对象模型,dom就是HTML页面的模型,将每个标签都作为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框,层 ...

  2. (7)Jquery1.8.3快速入门_内容过滤选择器

    一.Jquery的内容过滤选择器: 内容过滤选择器: 1.:contains(text) 选取含有文本内容为text的元素 2. :empty 选取不包含子元素或者文本为空的元素 3.:has(sel ...

  3. 汇编语言--微机CPU的指令系统（五）（转移指令）

    (9)转移指令 转移指令是汇编语言程序员经常使用的一组指令.在高级语言中,时常有“尽量不要使用转移语句”的劝告,但如果在汇编语言的程序中也尽量不用转移语句,那么该程序要么无法编写,要么没有多少功能,所 ...

  4. 什么是xss攻击，如何预防(初级)？

    概念: XSS(Cross Site Scripting),即跨站脚本攻击,是一种常见于web应用程序中的计算机安全漏洞.XSS通过在用户端注入恶意的可运行脚本,若服务器端对用户输入不进行处理,直接将 ...

  5. Powershell中显示隐藏文件

    PS> Get-ChildItem -Path $home -Force PS> Get-ChildItem -Path $home -Hidden

  6. jfinal中excel表格导出

    今天工作中遇到了excel表格导出的操作,还好有写好的模板,不然我也是焦头烂额,下面记录一下excel表格导出的操作步骤,同时用来给正在学习jfinal的小伙伴一些参考和学习. 首先我们需要把表格查询 ...

  7. es6 语法 （解构赋值）

    1.结构赋值 { let a,b,c; [a,b] = [1,2]; console.log(a,b); //1,2} { let a,b,rest; [a,b,...rest] = [1,2,3,4 ...

  8. 13张动图助你彻底看懂马尔科夫链、PCA和条件概率！

    13张动图助你彻底看懂马尔科夫链.PCA和条件概率! https://mp.weixin.qq.com/s/ll2EX_Vyl6HA4qX07NyJbA [ 导读 ] 马尔科夫链.主成分分析以及条件概 ...

  9. loadrunner 脚本优化-参数化之Parameter List参数同行取值

    脚本优化-参数化之Parameter List参数同行取值 by:授客 QQ:1033553122 select next row 记录选择方式 Same line as,这个选项只有当参数多余一个时 ...

  10. Android Service、IntentService，Service和组件间通信

    Service组件 Service 和Activity 一样同为Android 的四大组件之一,并且他们都有各自的生命周期,要想掌握Service 的用法,那就要了解Service 的生命周期有哪些方 ...