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 ...
随机推荐
- iOS---iOS9搜索功能
前言 在iOS9之前我们只能使用Spotlight来搜索应用名称来打开指定App,而其他的内容都是提供给系统使用(信息,联系人,邮件等).在iOS9以后Apple允许开发者设置应用中任意内容可以被Sp ...
- iOS--知识综合应用成就时髦小功能点
iOS--知识综合应用成就时髦小功能点
- Policy Management
策略管理用于管理数据库实例.数据库以及数据库对象的各种属性,Policy Management 位于Management Catalog下, 一,Basic concepts 引用园子里深蓝的博客&l ...
- LINQ系列：LINQ to DataSet的DataTable操作
LINQ to DataSet需要使用System.Core.dll.System.Data.dll和System.Data.DataSetExtensions.dll,在项目中添加引用System. ...
- 小谈MVC 模式
MVC (Modal View Controler) 本来是存在于Desktop程序中的,M是指数据模型,V是指用户界面,C则是控制器.使用MVC的目的是将M和V的实现代码分离,从而使同一个程序可以使 ...
- Minor【 PHP框架】2.第一个应用与请求的生命周期
框架Github地址:github.com/Orlion/Minor (如果觉得还不错给个star哦(^-^)V) 框架作者: Orlion 知乎:https://www.zhihu.com/peop ...
- centos6.5 下搭建lamp环境
一直以为很麻烦,实际操作起来并没有遇到什么问题,yum源是163,php版本是5.3(有点老,以后再更新吧):详细步骤如下: 第一步:安装php mysql apache yum -y install ...
- ASP.NET MVC之Session State性能问题（七）
前言 这一节翻译一篇有关Session State性能问题的文章,非一字一句翻译. 话题 不知道我们在真实环境中是否用到了Session State特性,它主要用来当在同一浏览器发出多个请求时来存储数 ...
- 通过setTimeout来取消因大量计算造成的网页卡顿
js是单线程的,所以有些大量计算的操作会占用线程资源,导致页面卡住. 今天遇到这样一个场景,选择一个下拉框之后,对数据进行筛选,这个过程中有大量计算,点了selecte的option之后,option ...
- 如何使用Xmanager及VNC登录远程桌面
如何调用远程桌面,比较常见的有两种方式:Xmanager及VNC 正好今天鼓捣了一下,特整理如下: Xmanager Xmanager的调用也有两种方式: 一.直接在Xshell中调用 这时需设置会话 ...