盒子的浮动：float属性

最新推荐文章于 2023-02-13 17:38:33 发布

203最强

最新推荐文章于 2023-02-13 17:38:33 发布

阅读量1.5k

点赞数

分类专栏： CSS页面布局及排版文章标签： css float 定位浮动

本文链接：https://blog.csdn.net/qq_36689512/article/details/53862738

版权

CSS页面布局及排版专栏收录该内容

4 篇文章 0 订阅

订阅专栏

盒子的浮动：float属性

在CSS中，通过设置块级元素的float属性，可以使元素浮动。属性如下所示：

①none:默认属性，元素不浮动，并会显示在其在文本中出现的位置。

②lfet:元素向左浮动，表示向父元素的左侧靠紧。

③right:元素向右浮动，表示父元素的右紧靠。如下是实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>盒子的float属性</title>
		<style type="text/css">
			body{
			margin: 15px;
			font-family: "微软雅黑";
			font-size: 12px;
			}
			.son1{
			border: dashed;
			float: left;
			}
			.son2{
			border: dashed;
			float:right;	
			}
		</style>
	</head>
	<body>
	<div>
		<div class="son1"><em><b>floatleft</b></em></div>
		<div class="son2"><em><b>floatright</b></em></div>	
    </div>	
	</body>
</html>