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 ...
随机推荐
- （C++）C++多态性中的静态绑定和动态绑定
静态绑定和动态绑定是C++多态性的一种特性. 1.对象的静态类型和动态类型: 对象的静态类型: 对象在声明是采用的类型,在编译期确定: 对象的动态类型: 当前对象所指的类型,在运行期决定,对象的动态类 ...
- Emitting signals
Objects created from a QtCore.QObject can emit signals. In the following example we will see how we ...
- Ajv JSON数据格式校验 使用
1.官网 https://ajv.js.org/ 2.示例代码 <!DOCTYPE html> <html lang="zh"> <head> ...
- Linux中more和less命令用法（转）
一.more命令 more功能类似 cat ,cat命令是整个文件的内容从上到下显示在屏幕上. more会以一页一页的显示方便使用者逐页阅读,而最基本的指令就是按空白键(space)就往下一页显示,按 ...
- java获取unicode码
public String toUNICODE(String s) { StringBuilder sb=new StringBuilder(); for(in ...
- PHP位运算符(转)
例子 名称 结果 $a & $b And(按位与) 将在 $a 和 $b 中都为 1 的位设为 1. $a | $b Or(按位或) 将在 $a 或者 $b 中为 1 的位设为 1. $a ^ ...
- centos下 安装jdk
JDK 1.7下载地址 http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html JDK ...
- 关注C++细节——C++11新标准之decltype的使用注意
c++11新特性--decltype decltype是C++11加入的一个新的keyword,目的是选择并返回操作数的数据类型,重要的是,在此过程中编译器分析表达式并得到它的类型,却不实际计算表达式 ...
- linux CentOs 权限导致的Apache - "DocumentRoot must be a directory"的解决方案
在配置apache服务时经常遇到DocumentRoot must be a directory的错误提示,刚接触到apache时折腾了几个小时才找到错误的原因,出现这样的错误一般都是由于selinu ...
- delphi无边框可拖动窗体
unit UFrmModless; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, ...