韩顺平_php从入门到精通_视频教程_第18讲_浮动_学习笔记_源代码图解_PPT文档整理

最新推荐文章于 2025-03-12 13:57:30 发布

wenximalong

最新推荐文章于 2025-03-12 13:57:30 发布

阅读量2.3k

点赞数

分类专栏： PHP

本文链接：https://blog.youkuaiyun.com/wenximalong/article/details/8190267

版权

PHP 专栏收录该内容

43 篇文章

订阅专栏

文西马龙：http://blog.youkuaiyun.com/wenximalong/

CSS核心内容——浮动

浮动
浮动是CSS中很重要的概念， ★★★必须掌握★★★。浮动涉及到左浮动、右浮动、清除浮动。

如果我们要实现如下图形，就可以使用右浮动，当把div1向右浮动时，它 脱离了标准流并且像右移动，直到它的右边缘碰到包含该框的右边缘。

当一个div右浮动的时候，它就会一直往右边移动，让出它本身的位置，它碰到什么时候停止呢，直到碰到包含它的那个容器的最右边。

float1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<link rel="stylesheet" type="text/css" href="float1.css" />
		<title>浮动</title>
	</head>
	<body>
		<!--div2 是div1的父元素-->
		<div class="div2">
			<div class="div1" id="special">div1</div>
			<div class="div1">div2</div>
			<div class="div1">div3</div>
		</div>
	</body>
</html>

float1.css

.div1{
	width: 150px;
	height: 100px;
	border: 1px solid blue;
	background-color: pink;
	margin-top: 5px;
}

/*id选择器，要求右浮动*/
#special{
	float: right;
}

.div2{
	width: 400px;
	height: 400px;
	border: 1px solid red;
}

在div+css中浮动分为左浮动，右浮动，清除浮动

1、右浮动
所谓右浮动，指一个块元素（浮动一般是在块元素才会生效）向右移动，让出自己的空间，向右移动直到碰到包含自己的父元素的最右边的边框。

2.左浮动
如果我们要实现如下图形，就可以使用左浮动，如果把所有三个框都向左浮动，那么框1向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

从这个案例我们可以看出， 所谓左浮动就是指，某个块元素尽量向左边移动，这样它就让出它右面的空间，让别的块元素来显示。

float2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<link rel="stylesheet" type="text/css" href="float2.css" />
		<title>浮动</title>
	</head>
	<body>
		<div class="div2">
			<div class="div1">div1</div>
			<div class="div1">div2</div>
			<div class="div1">div3</div>
		</div>
	</body>
</html>

float2.css

.div1{
	width: 150px;
	height: 100px;
	border: 1px solid blue;
	background-color: pink;
	margin-top: 5px;
	float: left;/*左浮动*/
}

.div2{
	width: 600px;
	height: 400px;
	border: 1px solid red;
}

为了讲解的更明白，再看一个案例，加深。如果其中一个没有浮动，会出现什么情况呢
（1）div1和div3左浮动，div2无浮动

写布局的时候经常会遇到，div2没有左浮动，它就不会贴在div1的后面

（2）div1和div2左浮动，div3无浮动

div2贴在了div1的后面，但是div3连背景都没有了。div3的背景跑到div1处了，相当于div3不知道上面有浮动，浮动就是脱离了标准流，div3试图占据div1的位置，就发生了奇怪的现象。
把div3的css属性修改为：width:160px; height:120px; background-color:red;，如下图所示，则能看的更清楚。 自己动手操作一下，就立刻明白。

注意：在做的时候， 要浮动大家都浮动，除非你清除浮动了
要让一排div都横向排列，大家都要浮动，少一个都不行

float3.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<link rel="stylesheet" type="text/css" href="float3.css" />
		<title>浮动</title>
	</head>
	<body>
		<div class="div4">
			<div class="div1">div1</div>
			<div class="div2">div2</div>
			<div class="div3">div3</div>
		</div>
	</body>
</html>

float3.css

.div1{
	width: 150px;
	height: 100px;
	border: 1px solid blue;
	background-color: pink;
	margin-top: 5px;
	float: left;/*左浮动*/
}

.div2{
	width: 150px;
	height: 100px;
	border: 1px solid blue;
	background-color: pink;
	margin-top: 5px;
	float: left;/*左浮动*/
}

.div3{
	width: 160px;
	height: 120px;
	border: 1px solid blue;
	background-color: red;
	margin-top: 5px;
	/*float: left;*//*左浮动*/
}

.div4{
	width: 600px;
	height: 400px;
	border: 1px solid red;
}

3.直到有足够的空间
如果我们的div框很多，外面的框无法容纳水平排列的浮动div元素，那么其他浮动块向下移动，直到有足够的空间（会自适应）。

4.卡住
如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”，直到有足够的空间。
动手试一下就明白，被光看不练。

（1）这么理解：div5在排的时候，它认为它本身应该排在div1下面的位置，但是当div5排的时候发现忽然被挡住了，div5就会认为本身前面有一个div了，所以div3就排在后面了。

（2）如果高度异常发生在div2上，则会如下图所示，div5会认为div2都有遮挡了，更不会在div2前面排了。 这样理解，div5排的时候，先扫描一下，虽然div1下面可以排，但是div2下面都被占了，第二个已经被占了，第一个就更不能被占，然后排在div3的下面，

（3）更加极端，如果高度异常发生在div4上，则会如下图所示，div5会以div4的高度为界，再另起。以div4的下边缘为界。

float4 .html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<link rel="stylesheet" type="text/css" href="float4.css" />
		<title>浮动</title>
	</head>
	<body>
		<div class="div2">
			<!--<div class="div3">div1</div>-->
			<div class="div1">div1</div>
			<!--<div class="div3">div2</div>-->
			<div class="div1">div2</div>
			<div class="div1">div3</div>
			<div class="div3">div4</div>
			<div class="div1">div5</div>
			<div class="div1">div6</div
		</div>
	</body>
</html>

float4.css

.div1{
	width: 150px;
	height: 100px;
	border: 1px solid blue;
	background-color: pink;
	margin-top: 5px;
	float: left;/*左浮动*/
}

.div2{
	width: 620px;
	height: 400px;
	border: 1px solid red;
}

.div3{
	width: 150px;
	height: 110px;
	border: 1px solid blue;
	background-color: pink;
	margin-top: 5px;
	float: left;/*左浮动*/
}

浮动总结：

你可以这么理解浮动：如果一个元素右/左浮动则：
①它本身会尽可能向右/左浮动，直到碰到边框或者别的浮动元素，特别强调浮动对块元素和行内元素都生效。
②元素向右/左浮动，就相当于让出自己的左/右边，别的元素就会在它的左/右边排列。

★★★注意：一个行内元素被浮动修饰了，浏览器就把它当做块元素了。

比如下面的代码

float6.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<link rel="stylesheet" type="text/css" href="float6.css" />
		<title>浮动</title>
	</head>
	<body>
		<div class="div2">
			<span class="div1">span1</span>
			<span class="div1">span2</span>
			<span class="div1">span3</span>
		</div>
	</body>
</html>

float6.css

.div2{
	width: 500px;
	height: 300px;
	border: 1px solid red;
}

.div1{
	width: 150px;
	height: 100px;
	border: 1px solid blue;
	background-color: pink;
	/*display: block;*/ /*以块元素方式显示*/
	float: left; /*左浮动*/
}

（1）把float: left;注释掉时，显示如下（IE,firefox，chrome均测试）

（2）如果左浮动了，竟然会影响到对width:150px;和height:100px;的解析，浏览器认宽和高了，显示如下（IE 5.5 6 7 8,firefox，chrome均测试）。 如果一旦一个元素被浮动修饰了，浏览器就直接的默认为它是块元素了。浮动相当于 身兼两职：1.让元素以块的方式来显示，2浮动

（3）如果不浮动，而display:block;显示如下。

主动实验，通过上面的三种情况，就会明白到位了。
一个技术真的深入研究细节的话，是不容易的。
如果使用浮动属性：则该元素不管是不是块元素，都会按照块的方式来显示。display:block;

再看一个案例，来帮助大家理解上面的浮动总结两句话。
字包图

（1）图片没有浮动时，它是一个行内元素，它右边的空间没有让出来

（2）一旦左浮动了，相当于图片把右边的空间让出，给你用。字包图了，如果看到图片和字距离太近，就用margin。虽然图片是行内元素，但是它浮动了，就相当于块了。让出位置。

float7.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>字包图</title>
	</head>
	<body>
		<!--图片无浮动-->
		<img src="m4.jpg" />我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌
		<br/>
		<br/>
		<br/>
		<!--图片左浮动-->
		<img style="float:left; margin-right: 5px;" src="m4.jpg" />我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌我是一只小猫；天天很无敌
	</body>
</html>

5.浮动——清除浮动
如果不希望别的元素在某个元素的左边或右边，可以使用清除浮动的方法 clear:right; clear:left; clear:both;
用案例，理解上面的话。

清除浮动是一个不太好理解的知识点，这个在后面的项目中我们再进一步理解。
清除浮动要慎用，用的不好，就会发生变形和走样。

为什么视频讲解：看书很难看出来，看了很久，书有一个什么问题呢，它要把一个事情说清楚，要很多篇幅章节，才能讲清楚这个事情，讲课演示一下，效果就很快了。比如装mysql，装个五六分钟，你可能就会特别明白了，但是要用书来讲mysql安装，至少要截十几个二十多个图，你还不一定明白。书是人写的文字，视频是具体的操作，看操作学习的更快，所以必须有老师授课，老师讲解以后，你必须亲自练习巩固。

韩顺平_php从入门到精通_视频教程_学习笔记_源代码图解_PPT文档整理_目录