CSS（七）：浮动
一、float属性
取值：
left：左浮动
right：右浮动
none：不浮动
先看下面的一个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动</title>
<style type="text/css">
.box1,.box3{
height: 100px;
width: 100px;
}
.box1{
background-color: red;
}
.box2{
background-color: blue;
width: 120px;
height: 100px;
}
.box3{
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
效果：
因为DIV是块级元素，所以定义的三个DIV是竖直显示的。这时给第一个DIV添加浮动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动</title>
<style type="text/css">
.box1,.box3{
height: 100px;
width: 100px;
}
.box1{
background-color: red;
float: left;/*添加左浮动*/
}
.box2{
background-color: blue;
width: 120px;
height: 100px;
}
.box3{
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
效果：
给第一个DIV添加浮动以后，第一个DIV脱离文档流而浮动起来，原先的位置会被下面其他的元素所取代，所以第二个DIV会在第一个DIV下面。
在来看看右浮动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动</title>
<style type="text/css">
.box1,.box3{
height: 100px;
width: 100px;
}
.box1{
background-color: red;
/*float: left;*//*添加左浮动*/
float: right;/*添加右浮动*/
}
.box2{
background-color: blue;
width: 120px;
height: 100px;
}
.box3{
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
效果：
可以看出第一个DIV浮动到了右边，而且和第二个DIV是在同一水平线上。
在给第二个DIV添加左浮动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动</title>
<style type="text/css">
.box1,.box3{
height: 100px;
width: 100px;
}
.box1{
background-color: red;
/*float: left;*//*添加左浮动*/
float: left;/*添加右浮动*/
}
.box2{
background-color: blue;
width: 120px;
height: 100px;
float: left;
}
.box3{
background-color: yellow;
height: 120px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
效果：
如果想让三个DIV都在一排显示呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动</title>
<style type="text/css">
.box1,.box3{
height: 100px;
width: 100px;
}
.box1{
background-color: red;
/*float: left;*//*添加左浮动*/
float: left;/*添加右浮动*/
}
.box2{
background-color: blue;
width: 120px;
height: 100px;
float: left;
}
.box3{
background-color: yellow;
height: 120px;
float: left;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
效果：
从上面截图中可以得出结论：给块级元素添加浮动，可以使块级元素在一排显示。
二、浮动的作用
1、块元素同行排列显示，一般用于排版、分栏显示。
2、设置浮动属性后，脱离文档流向指定的左或右边对齐，直到父元素的边界或浮动的元素。
注意：
使用浮动后要及时清除，避免影响其后的网页元素。
三、清除浮动的必要性
浮动后，脱离了文档流不占网页空间。
浮动后的网页元素会影响同级元素。
使用clear属性清除浮动
clear属性取值：
left：清除左浮动。
right：清除右浮动。
both：同时清除左、右浮动。
none：不清除浮动。
清除浮动表明容器框的哪边不挨着浮动框。
看下面的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动</title>
</head>
<body>
<div id="box">
<div class="box1"><img src="data:image/photo-1.jpg" alt="日用品"></div>
<div class="box2"><img src="data:image/photo-2.jpg" alt="图书"></div>
<div class="box3"><img src="data:image/photo-3.jpg" alt="鞋子"></div>
<div class="box4">浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或者另一个浮动盒子
位置，本网页中有三个图片，分别代表日用品、图书以及鞋子。在这里使用这三个图片和本段文字演示浮动在网页
当中的应用。
</div>
</div>
</body>
</html>
效果：
下面给4个DIV都添加向左的浮动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动</title>
<style type="text/css">
#box{
border: 1px solid #000;
}
.box1{
border: 1px dashed red;
float: left;
}
.box2{
border: 1px dashed red;
float: left;
}
.box3{
border: 1px dashed #060;
float: left;
}
.box4{
border: 1px dashed red;
font-size: 12px;
line-height: 23px;
float: left;
}
div{
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div id="box">
<div class="box1"><img src="data:image/photo-1.jpg" alt="日用品"></div>
<div class="box2"><img src="data:image/photo-2.jpg" alt="图书"></div>
<div class="box3"><img src="data:image/photo-3.jpg" alt="鞋子"></div>
<div class="box4">浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或者另一个浮动盒子
位置，本网页中有三个图片，分别代表日用品、图书以及鞋子。在这里使用这三个图片和本段文字演示浮动在网页
当中的应用。
</div>
</div>
</body>
</html>
效果：
正常情况下，四个DIV应该在最外层的DIV里面，为什么会出现这种情况呢？原因：内层盒子有浮动，外层盒子不能自动扩高。如何解决呢？这时候就需要清除浮动了。
1、给里面第四个DIV清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动</title>
<style type="text/css">
#box{
border: 1px solid #000;
}
.box1{
border: 1px dashed red;
float: left;
}
.box2{
border: 1px dashed red;
float: left;
}
.box3{
border: 1px dashed #060;
float: left;
}
.box4{
border: 1px dashed red;
font-size: 12px;
line-height: 23px;
clear: both;
}
div{
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div id="box">
<div class="box1"><img src="data:image/photo-1.jpg" alt="日用品"></div>
<div class="box2"><img src="data:image/photo-2.jpg" alt="图书"></div>
<div class="box3"><img src="data:image/photo-3.jpg" alt="鞋子"></div>
<div class="box4">浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或者另一个浮动盒子
位置，本网页中有三个图片，分别代表日用品、图书以及鞋子。在这里使用这三个图片和本段文字演示浮动在网页
当中的应用。
</div>
</div>
</body>
</html>
效果：
四、清除浮动的方法
几个并列的盒子同时添加浮动，它们的父级盒子会出现以下几种情况：
1、背景不能显示。
2、边框不能撑开。
如何清除浮动：
方法一：添加新的元素，应用clear:both;
还是以上面的为例演示清除浮动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动</title>
<style type="text/css">
#box{
border: 1px solid #000;
}
.box1{
border: 1px dashed red;
float: left;
}
.box2{
border: 1px dashed red;
float: left;
}
.box3{
border: 1px dashed #060;
float: left;
}
.box4{
border: 1px dashed red;
font-size: 12px;
line-height: 23px;
float: left;
}
div{
margin: 10px;
padding: 10px;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div id="box">
<div class="box1"><img src="data:image/photo-1.jpg" alt="日用品"></div>
<div class="box2"><img src="data:image/photo-2.jpg" alt="图书"></div>
<div class="box3"><img src="data:image/photo-3.jpg" alt="鞋子"></div>
<div class="box4">浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或者另一个浮动盒子
位置，本网页中有三个图片，分别代表日用品、图书以及鞋子。在这里使用这三个图片和本段文字演示浮动在网页
当中的应用。
</div>
<!--添加新的元素清除浮动-->
<div class="clear"></div>
</div>
</body>
</html>
效果：
方法二：父级添加overflow:auto;zoom:1;或者overflow:hidden;
//zoom:1;是在处理浏览器的兼容性问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动</title>
<style type="text/css">
#box{
border: 1px solid #000;
overflow: hidden;
}
.box1{
border: 1px dashed red;
float: left;
}
.box2{
border: 1px dashed red;
float: left;
}
.box3{
border: 1px dashed #060;
float: left;
}
.box4{
border: 1px dashed red;
font-size: 12px;
line-height: 23px;
float: left;
}
div{
margin: 10px;
padding: 10px;
}
/* .clear{
clear: both;
} */
</style>
</head>
<body>
<div id="box">
<div class="box1"><img src="data:image/photo-1.jpg" alt="日用品"></div>
<div class="box2"><img src="data:image/photo-2.jpg" alt="图书"></div>
<div class="box3"><img src="data:image/photo-3.jpg" alt="鞋子"></div>
<div class="box4">浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或者另一个浮动盒子
位置，本网页中有三个图片，分别代表日用品、图书以及鞋子。在这里使用这三个图片和本段文字演示浮动在网页
当中的应用。
</div>
<!--添加新的元素清除浮动-->
<!-- <div class="clear"></div> -->
</div>
</body>
</html>
效果：
方法三：:after方法
注意：方法三要作用于浮动元素的父级。
例如：
/*==for IE6/7 Maxthon2==*/
#box{zoom:1;}
/*==for FF/chrome/opera/IE8==*/
#box:after{
clear:both;
content:'.';
display:block;
width:0px;
height:0px;
visibility:hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动</title>
<style type="text/css">
#box{
border: 1px solid #000;
}
#box:after{
clear: both;/*清除所有浮动*/
content: '.';/*content内容可以为空*/
display: block;/*转换为块级元素*/
width: 0;
height: 0;
visibility: hidden;
}
.box1{
border: 1px dashed red;
float: left;
}
.box2{
border: 1px dashed red;
float: left;
}
.box3{
border: 1px dashed #060;
float: left;
}
.box4{
border: 1px dashed red;
font-size: 12px;
line-height: 23px;
float: left;
}
div{
margin: 10px;
padding: 10px;
}
/* .clear{
clear: both;
} */
</style>
</head>
<body>
<div id="box">
<div class="box1"><img src="data:image/photo-1.jpg" alt="日用品"></div>
<div class="box2"><img src="data:image/photo-2.jpg" alt="图书"></div>
<div class="box3"><img src="data:image/photo-3.jpg" alt="鞋子"></div>
<div class="box4">浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或者另一个浮动盒子
位置，本网页中有三个图片，分别代表日用品、图书以及鞋子。在这里使用这三个图片和本段文字演示浮动在网页
当中的应用。
</div>
<!--添加新的元素清除浮动-->
<!-- <div class="clear"></div> -->
</div>
</body>
</html>
五、overflow属性
1、作用
定义溢出元素内容区的内容会如何处理。
2、取值
visible：默认。
auto：自动超出部分有滚动条。
hidden：多余的隐藏。
scroll
CSS（七）：浮动的更多相关文章
- css清除浮动深度解析
首先引入一个新的概念"包裹". float:left会使得该属性的作用容器包裹住其内部元素:那么还有么有其他属性能够产生类似于浮动这种包裹性? 答案是有的:像"浮动&qu ...
- css清除浮动大全共8种方法
原文链接http://www.jb51.net/css/173023.html 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同 ...
- CSS清除浮动技巧
一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内,因为对两个黑色盒子使用了f ...
- DIV+CSS 清除浮动方法总结
DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所 ...
- CSS清除浮动八种方法
在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下 清除浮动是每一个 web前台设 ...
- css清除浮动的方法汇总
这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录. 引用地址 : http://www.cnblogs.com/ForEvErNoME/p/3383539.html ------------- ...
- 更简洁的 CSS 清理浮动方式
CSS清理浮动有很多种方式,像使用 br 标签自带的 clear 属,使用元素的 overflow,使用空标签来设置 clear:both 等等.但考虑到兼容问题和语义化的问题,一般我们都会使用如下代 ...
- css清除浮动定位造成的异常
清除浮动是为了解决高度塌陷的问题:内层有好几个div有宽有高,并且选择了浮动定位,但是外层的div却并没有设置宽高.在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动( ...
- 【转】CSS清除浮动_清除float浮动
CSS清除浮动方法集合 一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 浮动产生样式效果截图 ...
- CSS 中浮动的使用
float none 正常显示 left 左浮动 right 右浮动 clear none 允许两边浮动 left 不允许左边浮动 right 不允许右边浮动 both 不允许两边浮动 <!DO ...
随机推荐
- javascript - 字符串比较
1. sort是排序根据字符的ASCIll码排序的,不分字符串或其它元素(仅适用于数组) 2. split是将字符串转为数组形式 3. join是将数组转为字符串形式 4. indexOf找到元素后返 ...
- ScriptableObject 对象化的运用
http://www.cnblogs.com/oldman/articles/2409554.html using UnityEngine; using UnityEditor; using Syst ...
- 14.2 事务的ACID属性
14.2 事务的ACID属性正在更新内容.请稍后
- android何如获取SIM卡提供国家代码（ISO）
TelephonyManager telManager = (TelephonyManager)getSystemService(Context.TELEPHONY_SERVICE); telMana ...
- Mysql 比较运算符详解
熟悉了最简单的算术运算符,再来看一下比较运算符.当使用SELECT 语句进行查询时,MySQL允许用户对表达式的左边操作数和右边操作数进行比较,比较结果为真,则返回1,为假则返回0,比较结果不确定则返 ...
- JEECG 简单实例讲解权限控制
业务背景:某公司要实现一个日志系统,用来了解员工的工作量饱和情况. 需求: 1.角色分为:员工.经理 两种. 2.员工每天在日志系统中填报工作总结,然后经理进行点评. 3.表单内容包含:姓名.日期.工 ...
- memcached+Mysql(主从)
昨天和守住看了下http://hi.baidu.com/156544632/blog/item/3b26527b68623ff00bd18746.html这篇文章,思路很好,但感觉就是太乱了,而且还出 ...
- django之整体复习
1. 配置文件: media: avatar = models.FileField(upload_to='avatar') sessiongs MEDIA_ROOT=os.path.join(BASE ...
- Atitit.国际化中的日期与钱符号问题
Atitit.国际化中的日期与钱符号问题 1. 用户名注册的问题 1 1.1. 不能限制用户名长度与特殊符号 1 2. 2.8月7号未必总写成8/7,有时也用7/8 2 3. 5.$未必总是指美元 3 ...
- docker使用问题总结
1. docker报[Error response from daemon: Error running DeviceCreate (createSnapDevice) dm_task_run fai ...