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. ife 零基础学院 day 1 - 我为什么想学前端

    与前端结缘   我是后端研发,毕业四年,用了四年C#,一开始写ASP.NET,有时会在asp页面写简单的js和html,做点css样式调整.当时的感触是前端调试太费劲了,因为没有js.html.css ...

  2. HTML+CSS基础（1）-理解什么是HTML和CSS

    什么是HTML w3c的解释如下: HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种 ...

  3. [PHP]算法-拼接最小字典序的实现

    拼接最小字典序: 给定一个字符串类型的数组strs,请找到一种拼接顺序,使得将所有字符串拼接起来组成的大字符串是所有可能性中字典顺序最小的并放回这个大字符串. 思路: 1.字典序,12345这五个数, ...

  4. Laravel 系列入门教程（五）【最适合中国人的 Laravel 教程】

    本文是本系列教程的完结篇,我们将一起给 Article 加入评论功能,让游客在前台页面可以查看.提交.回复评论,并完成后台评论管理功能,可以删除.编辑评论.Article 和评论将使用 Laravel ...

  5. gridcontrol 添加行删除行

    一.添加行 注意,必须先绑定数据源(可以是一个空的Datatable):然后再执行添加行的动作,否则不会成功: public partial class Form2 : Form { public F ...

  6. canvas-a13prototype.html

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. linux学习笔记-时间配置综述

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 一.时间类型分为: 1.网络时间(设置时区,ntp服务器同步的时间) 2.系统时间,当前系统所显示的时间 3.硬件(RTC)时间 ...

  8. 照葫芦画瓢系列之Java --- Maven的配置

    一.Maven仓库分类 Maven中,仓库只分为两类:本地仓库和远程仓库.当Maven根据坐标寻找构件的时候,它首先去查看本地仓库,如果本地仓库有此构件,则直接使用,如果本地仓库不存在此构件,或者需要 ...

  9. Windows服务System权限下在当前用户桌面创建快捷方式C#实例程序

    Windows服务一般运行在System权限下,这样权限比较高,方便执行一些高权限的操作. 但是,Environment.GetFolderPath等函数获取的也是System用户下的,而不是当前用户 ...

  10. leetcode-58.最后一个单词的长度

    leetcode-58.最后一个单词的长度 题意 给定一个仅包含大小写字母和空格 ' ' 的字符串,返回其最后一个单词的长度. 如果不存在最后一个单词,请返回 0 . 说明:一个单词是指由字母组成,但 ...