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. spark之scala程序开发(本地运行模式)：单词出现次数统计

    准备工作: 将运行Scala-Eclipse的机器节点(CloudDeskTop)内存调整至4G,因为需要在该节点上跑本地(local)Spark程序,本地Spark程序会启动Worker进程耗用大量 ...

  2. Java并发（一）—— 使用多线程

    Java的线程机制是抢占式的,所谓的抢占式指的是每一个线程都会被分配一个指定大小的时间片,一旦这个时间片用完,就会通过上下文切换到另一个线程上去. 并发是主要是为了提高单处理器的性能.创建一个线程会有 ...

  3. C#常量和字段以及各种方法的语法总结

    目录 一. 常量和字段.... 1 1. 常量.... 1 2.字段.... 1 二.方法.... 2 1.实例构造器和类(引用类型).... 2 2.实例构造器和结构(值类型).... 2 3.类型 ...

  4. npoi实现数据导出Excel

    npoi     .NET第三方的Office功能组件. 链接地址 http://npoi.codeplex.com/ 引用命名空间 using NPOI.HSSF.UserModel; using ...

  5. Java_Collections工具类

    Collections 工具类 * Collection与Collections区别 Collection 接口,(大部分集合类的实现接口) Collections 工具类(针对列表) * Colle ...

  6. C#设计模式之九组合模式（Composite Pattern）【结构型】

    一.引言 今天我们要讲[结构型]设计模式的第四个模式,该模式是[组合模式],英文名称是:Composite Pattern.当我们谈到这个模式的时候,有一个物件和这个模式很像,也符合这个模式要表达的意 ...

  7. 史上最全python面试题详解（三）（附带详细答案（关注、持续更新））

    38.面向对象深度优先和广度优先是什么? 39.面向对象中super的作用? 40.是否使用过functools中的函数?其作用是什么? Python自带的 functools 模块提供了一些常用的高 ...

  8. 微信小程序 JS 获取View 和 屏幕相关属性（高度、宽度等等）

    wx.getSystemInfo({success: function (res) {thisWidth = res.windowWidth;}}); that.setData({view_Width ...

  9. C# 任务 数据加载不影响其他操作

    private void button1_Click(object sender, EventArgs e) { //this.timer1.Enabled = true; Task t1 = new ...

  10. 数据库连接池（基于MySQL数据库）

    使用JDBC是怎么保证数据库客户端和数据库服务端进行连接的? 通过代码: conn=DriverManager.getConnection(url, username, password); JDBC ...