在什么时候实现浮动和怎么实现浮动

最新推荐文章于 2023-03-12 16:05:12 发布

zzh_3303097051

最新推荐文章于 2023-03-12 16:05:12 发布

阅读量562

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/zzh_3303097051/article/details/110558736

版权

一、浮动的作用

浮动rigth可以使浮动框抛弃原来的位置后面的浮动会紧跟过来浮动到父亲元素边框的右边界停止。

二、在什么时候实现浮动和怎么实现浮动

用html写入如下代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		#pp{/*使div标签变为1像素宽，实线，边框变红色*/
			border: 1px solid red;
		}
		span{/*使span标签变为1像素宽，虚线，边框变黄绿色*/
			border: 1px dotted yellowgreen;
		}
	</style>
	<body>
		<div id="pp"><!--块级元素，独占一行-->
			<span>河南</span><!--行内元素-->
			<span>郑州</span><!--行内元素-->
		</div>
	</body>
</html>

运行后

这时会发现，河南与郑州之间有间隔，有些情况下是要消除间隙的，那就得用浮动消除他，加入

float: left让span标记向左浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		#pp{/*使div标签变为1像素宽，实线，边框变红色*/
			border: 1px solid red;
		}
		span{/*使span标签变为1像素宽，虚线，边框变黄绿色*/
			border: 1px dotted yellowgreen;
			float: left;/*让“河南”和“郑州”都向左浮动*/
		}
		
	</style>
	<body>
		<div id="pp"><!--块级元素，独占一行-->
			<span >河南</span><!--行内元素-->
			<span>郑州</span><!--行内元素-->
		</div>
	</body>
</html>

运行后

发现间隙消失了，但又发现div框只有上面一条线了，这是因为“河南”和“郑州”浮动后脱离了文档流，即脱离了div，而div内无东西撑住，下面的线只好往上飘了。下面来解决掉他。

用css消除副影响，在body中加入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		#pp{/*使div标签变为1像素宽，实线，边框变红色*/
			border: 1px solid red;
		}
		span{/*使span标签变为1像素宽，虚线，边框变黄绿色*/
			border: 1px dotted yellowgreen;
			float: left;/*让“河南”和“郑州”都向左浮动*/
		}
		
	</style>
	
	<body>
		<div id="pp"><!--块级元素，独占一行-->
			<span >河南</span><!--行内元素-->
			<span>郑州</span><!--行内元素-->
		</div>
		<style type="text/css">
			#pp:after{/*在元素后加上指定内容*/
				content: "";/*内容：空*/
				display: block;/*将div内东西变为块级元素*/
				clear: left;/*清除div左边浮动*/
			}
		</style>
	</body>
</html>

运行后