您的位置: 首页  >  文章  >  前端浮动模块

前端浮动模块

分类: 文章 • 2024-12-05 14:36:45

一.浮动的分类：

  1. 左浮动
  2. 右浮动
  3. 清除浮动

二.浮动的理解：

1.我们可以把浮动看做一个气泡，浮动就是漂浮的意思。网页顶端看做水面，模块浮动到网页顶端第一行。
2.非浮动的模块会默认显示在第一行，而且页面的每一行只能显示一个非浮动的模块。

三.浮动案例：

我们想要得到如图的操作：
前端浮动模块
从图中我们发现有三个块是在一行的，前面我们已经提到，非浮动的块是独占一行的，现在要想让块都能在一行，那就必须让3个块都处于浮动状态，那么能不能让第一个块不浮动，其余浮动呢？
当然也不行，原因是，我们把块看成一个气泡了，它漂浮起来会遮盖住第一个块。

<!DOCTYPE html>
<html>
		<head>
			<meta charset="UTF-8">
			<style type="text/css">
   			#black1{
   			background-color:blue;
   			}
   			#balck2{
   			backgroud-color:yellow;
   			}
   			#black3{
   			background-color:gray;
   			}
   			div{
   			width:100px;
   			height:100px;
   			float:left;
   			border:solid 1px black;
   			}
   			</style>
		</head>
	<body>
		<div id="black1">块1</div>
		<div id="black2">块2</div>
		<div id="black3">块3</div>
	</body>
</html>

通过以上代码实现，代码实现思路：
1.用3个div包住三个块，形成蓝色块，黄色块，灰色块。
2.采用id选择器，对三个块的id进行赋值：black1，black2，black3.
3.设置style样式，进行CSS样式设置，修改块的样式
样式修改代码：

<style type="text/css">
			#black1{
   			background-color:blue;
   			}
   			#balck2{
   			backgroud-color:yellow;
   			}
   			#black3{
   			background-color:gray;
   			}
   			div{
   			width:100px;
   			height:100px;
   			float:left;
   			border:solid 1px black;
   			}
</style>

在其中我们通过标签选择器对所有块进行了宽高的定义，还定义了我们重点要说的浮动。

<style type="text/css">
			div{
   			width:100px;
   			height:100px;
   			float:left;
   			border:solid 1px black;
   			}
</style>

我们定义左浮动的方法：
float:left;
我们定义右浮动的方法：
float:right;

四.浮动的特殊情况

前端浮动模块
1.我们发现，如果要完成上图的效果的话，应该是这种情况：
块1和块2都要左浮动，那么块3的情况呢？
答：块3的情况一定不是非浮动那么简单就完了，因为，块3非浮动的话会导致块3跑到第一行被块1遮挡住。
所以对于块3我们进行单独特殊处理，上代码：

<style type="text/css">
		#black1{
   			background-color:blue;
   			float:left;
   			}
   			#balck2{
   			backgroud-color:yellow;
   			float:left;
   			}
   			#black3{
   			background-color:gray;
   			clear:left;
   			}	
</style>

观察到了吗？这里用的是clear:left;,这是清除左浮动的意思啊。这样才会导致块3进行换行操作，当然你用clear:right;的效果其实会一样的。

五.浮动总结

在进行网页排版的时候，块的分布我们可以用浮动来处理，当然后边学会用定位来处理问题会变得更容易。

相关推荐