CSS——浮动的三个性质

最新推荐文章于 2022-09-23 11:56:16 发布

原创最新推荐文章于 2022-09-23 11:56:16 发布 · 336 阅读

0 ·

CC 4.0 BY-SA版权

学习笔记同时被 2 个专栏收录

128 篇文章

订阅专栏

css

32 篇文章

订阅专栏

本文探讨了CSS中浮动的三个关键性质：1) 浮动元素会脱标，允许其他非浮动元素填补其在标准文档流中的位置；2) 浮动元素会互相贴靠，根据空间情况调整自身位置；3) 浮动元素有字围效果，即文字会围绕浮动元素显示。

1.浮动元素脱标

	<style type="text/css">
		.box1{
			float: left;
			width: 200px;
			height: 100px;
			background-color: yellowgreen;
		}
		.box2{
			width: 400px;
			height: 400px;
			background-color: skyblue;
		}
	</style>

绿色盒子float: left; 蓝色盒子没有float。绿色的盒子脱离了标准文档流，那么蓝色盒子就是现在标准文档流中的第一个盒子，所以会渲染在页面的左上方。

一个span标签不需要转成块级元素就能够设置宽度和高度，说明所有标签已经不区分行内和块了。一旦一个元素浮动了，无论以前是div还是span，都将能够并排且设置宽高。
如下：

	span{
		float: left;
		width: 200px;
		height: 200px;
		background-color: orange;
	}

2.浮动的元素互相贴靠
左浮动：

	<style type="text/css">
		body{
			font-size: 60px;
		}
		.box1{
			float: left;
			width: 100px;
			height: 400px;
			background-color: yellowgreen;
		}
		.box2{
			float: left;
			width: 120px;
			height: 420px;
			background-color:skyblue;
		}
		.box3{
			float: left;
			width: 140px;
			height: 300px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<div class="box1">1</div>
	<div class="box2">2</div>
	<div class="box3">3</div>
</body>

在以上代码中，如果空间足够，box3会贴着box2，但当浏览器窗口不够大的时候，box3会贴着box1，如果没有足够的空间贴着box1，则box3单独贴着左浏览器边框。

右浮动：（比较少使用）

	<style type="text/css">
		.box1{
			float:right;
			width: 100px;
			height: 400px;
			background-color: yellowgreen;
		}
		.box2{
			float: right;
			width: 120px;
			height: 420px;
			background-color:skyblue;
		}
		.box3{
			float: right;
			width: 100px;
			height: 400px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<div class="box1">1</div>
	<div class="box2">2</div>
	<div class="box3">3</div>
</body>

3.浮动元素有字围效果：

	<style type="text/css">
		div{
			float: left;
			width: 20px;
			height: 20px;
			background-color: orange;
		}
		p{
			background-color: yellowgreen;
		}
	</style>
</head>
<body>
	<div>1</div>
	<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</body>

div挡住了p，但是p中的文字不会被挡住，形成“字围”效果。