JavaWeb_CSS（11）_div 和 span_浮动

最新推荐文章于 2023-07-17 17:38:20 发布

魏宇轩

最新推荐文章于 2023-07-17 17:38:20 发布

阅读量714

点赞数

分类专栏： CSS（更新完）文章标签： JavaWeb CSS 浮动

本文链接：https://blog.csdn.net/qq_36260974/article/details/88410644

版权

CSS（更新完）专栏收录该内容

21 篇文章 3 订阅

订阅专栏

本系列博客汇总在这里：JavaWeb_CSS 汇总

一、div 浮动

HTML 页面的标准文档流（默认布局）是：从上到下，从左到右，遇块（块级元素）换行。
浮动层：给元素的 float 属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素（默认为body文本区域）的左右边框。而此浮动元素在文档流空出的位置，由后续的（非浮动）元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。
Float 有 4 个值
（1）left ：元素向左浮动。
（2）right ：元素向右浮动。
（3）none ：默认值。
（4）inherit ：从父元素继承 float 属性。
（5）浮动后的 div 宽度会变成 0，但是其内边框可能撑起它的宽和高。

示例

<!DOCTYPE html>
<html>
	<head>	
		<meta charset="UTF-8">		
		<title> www.weiyuxuan.com </title>		
		<style type="text/css">
			.outside
			{
				font-size: 12px;
				font-family: Arial;
				padding: 10px;
				background-color: red;
				border: 1px solid black;
			}			
			.inside1
			{			
				padding: 10px;
				border: 1px dashed black;
				background-color: orange;
				margin: 5px;
				float:left;				
				/*
				  1.div1向左漂浮之后，宽度变为0
				  2.div1移到父元素的左边
				  3.div1的原始位置被空出来，由后面的html元素来补上
				*/
			}			
			.inside2
			{
				padding: 10px;
				border: 1px dashed black;
				background-color: blue;				
			}
		</style>				
	</head>	
	<h1> 浮动  </h1>	
	<hr>	
	<body>	
		<div class="outside">
			<div class="inside1">内部 div1</div>
			<div class="inside2">内部 div2</div>
		</div>	
	</body>	
</html>

在这里插入图片描述

二、CSS 中 div 浮动对 html 元素的影响

如果浮动的 div 前面有同级别 html 元素，该浮动的 div 会排在 html 元素后面浮动，不会覆盖 html 元素。
总结：div 的浮动对前面的 html 元素没影响，对后面的 html 元素有影响。

示例

<!DOCTYPE html>
<html>
	<head>	
		<meta charset="UTF-8">		
		<title> www.weiyuxuan.com </title>		
		<style type="text/css">
			.outside
			{
				font-size: 12px;
				font-family: Arial;
				padding: 10px;
				background-color: gray;
				margin: 5px;
				border: 1px solid black;									
			}			
			.inside1
			{			
				padding: 10px;
				border: 1px dashed black;
				background-color: orange;										
			}			
			.inside2
			{
				padding: 10px;
				border: 1px dashed black;
				background-color: yellow;	
				margin: 5px;
				float:left;				
			}
		</style>				
	</head>
	<h1> 浮动  </h1>	
	<hr>	
	<body>	
		<div class="outside">
			<div class="inside1">内部 div1</div>
			<div class="inside2">内部 div2</div>
			<div class="inside1">内部 div3</div>
		</div>	
	</body>	
</html>

在这里插入图片描述

三、CSS 中多个 div 浮动

多个同级块元素同时在一个方向浮动，则从该方向上水平依次排列。
如果多个同级 html 元素同时浮动，这几个 html 元素就会从左到右浮动排列，脱离了 div 的自动换行。

示例

<!DOCTYPE html>
<html>
	<head>	
		<meta charset="UTF-8">		
		<title> www.weiyuxuan.com </title>		
		<style type="text/css">		
			.outside
			{
				font-size: 12px;
				font-family: Arial;
				padding: 10px;
				background-color: gray;
				margin: 5px;
				border: 1px solid black;									
			}			
			.inside1
			{			
				padding: 10px;
				border: 1px dashed black;
				background-color: orange;										
			}			
			.inside2
			{
				padding: 10px;
				border: 1px dashed black;
				background-color: yellow;	
				margin: 5px;
				float:left;				
			}		
		</style>				
	</head>	
	<h1> 浮动  </h1>	
	<hr>	
	<body>	
		<div class="outside">
			<div class="inside1">内部div1</div>			
			<div class="inside1">内部div2</div>
			<div class="inside2">内部div3</div>
			<div class="inside2">内部div4</div>
			<div class="inside2">内部div5</div>
			<div class="inside1">内部div6</div>
		</div>	
	</body>	
</html>

在这里插入图片描述

四、CSS 消除 div 漂浮的影响

前面 div 的浮动会影响后面的 div 的布局，如果想消除该影响可以使用 clear: 。

示例

<!DOCTYPE html>
<html>
	<head>	
		<meta charset="UTF-8">		
		<title> www.weiyuxuan.com </title>		
		<style type="text/css">		
			.outside
			{
				font-size: 12px;
				font-family: Arial;
				padding: 10px;
				background-color: gray;													
			}			
			.inside1
			{			
				padding: 10px;
				border: 1px dashed black;
				background-color: orange;
				float: left;										
			}			
			.inside2
			{
				padding: 10px;
				border: 1px dashed black;
				background-color: green;
				float: right;
			}			
			.inside3
			{
				padding: 10px;
				border: 1px dashed black;
				background-color: yellow;	
				clear: both;
			}			
		</style>				
	</head>	
	<h1> 浮动  </h1>	
	<hr>	
	<body>	
		<div class="outside">
			<div class="inside1">内部div1</div>			
			<div class="inside2">内部div2</div>		
			<div class="inside3">内部div3</div>			
		</div>	
	</body>	
</html>