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. CSS学习笔记2-2d变换和过渡属性

    前言:今天又是一个周末,心情不错,趁着闲暇之余,把剩下来的CSS3学习的内容全部整理出来,练习用的源码也稍微整理了一下. 2D转换 transform:translate||rotate||scale ...

  2. MySQL学习笔记三：库和表的管理

    1.MySQL数据库服务配置好后,系统会有4个默认的数据库. information_schema:虚拟对象,其对象都保存在内存中 performance_schema:服务器性能指标库 mysql: ...

  3. Objective-C中的单例模式

    ​    ​单例模式算是设计模式中比较简单的一种吧,设计模式不是只针对某种编程语言,在C++, Java, PHP等其他OOP语言也有设计模式,笔者初接触设计模式是通过<漫谈设计模式>了解 ...

  4. 我的编程开始（C）

    一,前言 写完t-sql系列,想了想自己的编程之路,一直有个想法,把自己这两年所整理的编程知识拿出来和大家分享,本来写完t-sql是想写一些设计思想的,因为现在也是在学习和整理一些简单框架,经常泡在大 ...

  5. 使用CSS3 制作一个material-design 风格登录界面

    心血来潮,想学学 material design 的设计风格,就尝试完成了一个登录页面制作. 这是整体效果. 感觉还不错吧,结尾会附上代码 在编写的过程中,没有使用任何图片或者字体图标,全部使用css ...

  6. 第一章 Linux內核簡介

    1. Linux是類Unix系統,但他不是Unix. 儘管Linux借鑑了Unix的許多設計並且實現了Unix的API(由Posix標準和其他Single Unix Specification定義的) ...

  7. CSS的margin塌陷（collapse）

    <!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head&g ...

  8. 【数据挖掘】朴素贝叶斯算法计算ROC曲线的面积

    题记:          近来关于数据挖掘学习过程中,学习到朴素贝叶斯运算ROC曲线.也是本节实验课题,roc曲线的计算原理以及如果统计TP.FP.TN.FN.TPR.FPR.ROC面积等等.往往运用 ...

  9. linux 安装 nginx 及反向代理配置

    Nginx ("engine x") 是一个高性能的HTTP和反向代理服务器,以下为Linux centos平台下安装nginx并配置反向代理的过程(采用源码安装的方式) 一:安装 ...

  10. 原创：从零开始，微信小程序新手入门宝典《一》

    为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习:一:微信小程序的特点张小龙:张小龙全面阐述小程序,推荐通读此文: 小程序是一种不需要下载.安装即可使用的 ...