float包裹性与破坏性及清除浮动几种方法
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包裹性与破坏性及清除浮动几种方法的更多相关文章
- CSS清除浮动八种方法
在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下 清除浮动是每一个 web前台设 ...
- 基础总结（01）--css清除浮动几种方法
1.父元素添加overflow:auto/hidden; 2.父元素内加空div,添加样式clear:both; 3.父元素添加伪类; .parent:after{ content:''; displ ...
- 定位网页元素、透明度、z-index、包裹性和破坏性
一.定位 position属性————规定元素的定位类型,即元素脱离文档流的布局,在页面的任意位置显示 也可以参见以前的总结 <—— 戳 static:默认值,没有定位 relative:相对定 ...
- CSS清除浮动8大方法
CSS清除浮动是每一位web前端工程师都要掌握的技术,也是让每一位刚入门的前端工程师感到头疼的问题, 下面就来讲一下CSS清除浮动的原理和各种解决方法,大家可以根据实际情况选择最佳的解决方案. 在用D ...
- css清除浮动的处理方法
根据<精彩绝伦的css> <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- css清除浮动的八大方法
清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的 ...
- css清除浮动的集中方法
一:浮动产生的副作用 1.父元素的背景不能显示 2.父元素的边框不能撑开 3.padding和margin失效 二:清除浮动的方法 1.给父元素设置高度:这样可以清除浮动,但是子元素内容高度不固定,这 ...
- CSS给元素清除浮动影响的方法，--最全四种方法
代码实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- css 清楚浮动三种方法
我们可以看到这样一个布局: <style> .left{ width: 200px; height: 200px; background-color: #00ee00; float: le ...
随机推荐
- Oracle 把秒转成时分秒格式(hh24:mm:ss);检测字符串是否是数字;字符串转换为数字
不说废话,贴代码: CREATE OR REPLACE FUNCTION to_time(sec IN NUMBER) RETURN VARCHAR2 IS /*把秒转成时分秒格式 auth lzpo ...
- VMware 安装虚拟机安装MAC （OSX10_11）
一.简述前言: 1.本案例是基于 VMware Workstation Pro(专业版)12 上创建一个MAC操作系统(版本 :OSX10_11),下面的步骤基本上和安装其他类型的虚拟机没有什么区别. ...
- ArcGIS API for JavaScript（2）-ArcGIS Server发布要素图层服务
1.前言 上一篇该系列的文章我们主要讲了一下基础Web地图搭建,这篇我们主要讲一下ArcGIS Server发布服务,并且如何调用服务.将自己的数据加载到Web地图当中来,实现Web端浏览数据. 2. ...
- ReceiveQueue
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace NetF ...
- unity开发相关环境（vs、MonoDevelop）windows平台编码问题
情景描述:最近在做Unity的网络底层,用VS编写源码,MonoDevelop用来Debug,在Flash Builder上搭建的Python做协议生成器,期间有无数次Unity莫名奇妙的的down掉 ...
- Textbox.Visible=False隐藏方式导致的问题
今天公司的正式环境有个功能不好使,但是测试环境没有问题,经过和同事的研讨,发现应该是我在写代码的时候把Textbox的visible属性设置为false导致的. 当时的需求是需要在发邮件的时候加上“相 ...
- float实例讲解
float实例讲解 float是个强大的属性,在实际前端开发过程中,人们经常拿它来进行布局,但有时,使用的不好,也麻烦多多啊. 比如,现在我们要实现一个两列布局,左边的列,宽度固定:右边的列,宽度自动 ...
- Java 8新特性-4 方法引用
对于引用来说我们一般都是用在对象,而对象引用的特点是:不同的引用对象可以操作同一块内容! Java 8的方法引用定义了四种格式: 引用静态方法 ClassName :: staticMetho ...
- MySQL学习笔记九：存储过程，存储函数，触发器
存储过程 1.存储过程由一组特定功能的SQL语句组成,对于大型应用程序优势较大,相对不使用存储过程,具有以下优点: a.性能提高,因为存储过程是预编译的,只需编译一次,以后调用就不须再编译 b.重用性 ...
- WebStorm文件类型关联设置
无意中创造了一个没有扩展名的文件,我选择了错误的文件类型关联.是js类型的,我却选成了文本,Ws每次编辑类型就成了txt文本,这个问题让我很苦恼,以下是我的解决方案. 错选的弹出框如下: 解决方案如下 ...