欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

浮动属性（float）

程序员文章站 2022-05-29 15:13:31
...

浮动属性（float）

		float 浮动属性
			left   左浮动
			right  右浮动
		注意：浮动属性，脱离标准文档流，元素一旦浮动，那么就不在页面中占有位置了。
		浮动属性目的：为了让块状元素变成一行。
		元素一旦浮动，就不是块状元素或者行内元素了。

#浮动属性代码

<!DOCTYPE html>
<html>
<head>
	<title>float浮动属性</title>
	<meta charset="UTF-8" />
	<style>
		#one{
			width:200px;
			height:200px;
			background:red;
			/*浮动属性-左浮动*/
			/*元素一旦浮动，就脱离标准文档流*/
			float:left;
		}
		#two{
			width:200px;
			height:200px;
			background:pink;
			float:left;
		}
		#three{
			width:200px;
			height:200px;
			background:cyan;
			/*浮动属性，右浮动*/
			float:right;
		}
	</style>
</head>
<body>
	<div id="one">1</div>
	<div id="two">2</div>
	<div id="three">3</div>
</body>
</html>

#效果如下：

浮动属性（float）

相关标签： float浮动属性 left right 浮动属性左浮动和右浮动

上一篇： 面试必问的新增问题 @zj-zhangjie

下一篇： 玉米淀粉可以做哪些食物？咦，居然这么多！

推荐阅读