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 ...
随机推荐
- Linux 内存泄露小结
本文仅限记录自己的一次 内存泄露追踪小记. 可能并不十分适用与大家的情况.而且方法也并不是很smart.仅做记录,能提供个思路更好. 一. 要问调试程序遇到什么问题最头疼, 内存泄露肯定 ...
- 你们对LinearLayout线性布局中Layout_weight的误解
帮人找个入门级别的书得负责任,自己先看一下有无缺陷,结果发现这个:(原文发在该书的论坛上,发现受众面太小了,无奈转到这个弃用很久的博客里,以后把心得慢慢发上来) Google Android开发入门与 ...
- Java生成各种条形码
import java.awt.image.BufferedImage; import java.io.FileOutputStream; import org.jbarcode.JBarcode; ...
- Nginx.conf简介
vim /etc/nginx/nginx.conf #user nobody; worker_processes 1; #error_log logs/error.log; #error_log lo ...
- 隐函数画图with R
隐函数画图 with R 这个函数 sin(xsiny)-cos(ycosx)=0 图是这个样子 怎么用R画出来呢?下面是代码 x<-y<-seq(-10,20,0.1) f<-fu ...
- Java lock 能被中断, synchronized 不能被中断
1.lock是可中断锁,而synchronized 不是可中断锁 线程A和B都要获取对象O的锁定,假设A获取了对象O锁,B将等待A释放对O的锁定, 如果使用 synchronized ,如果A不释放, ...
- js 多级联动（省、市、区）
js 多级联动(省.市.区) CreateTime--2018年4月9日17:10:38 Author:Marydon 方式一: 数据从数据库获取,ajax实现局部刷新 方式二: 数据从json文 ...
- LaunchScreen.storyboard 设置图片后不显示(转)
LaunchScreen.storyboard 设置图片后不显示 将图片放在根目录下即可 3D85E99F-A79B-4419-817D-1417E1446624.png 转至:http://ww ...
- nyoj 37 回文字符串 【DP】
先反向复制一个新的字符串,然后再找出最长公共子串,在用长度n减去就可以 回文字符串 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描写叙述 所谓回文字符串,就是一个字符串,从 ...
- ERRORS:<class 'Salesman.admin.UsrMngUserAdmin'>: (admin.E005) Both 'fieldsets' and 'fields' are specified.
在使用django admin的过程中 遇到了这个错误 . Both 'fieldsets' and 'fields' are specified. django.core.management.ba ...