css浮动属性

最新推荐文章于 2023-07-23 21:47:25 发布

置顶 yujiaj

最新推荐文章于 2023-07-23 21:47:25 发布

阅读量198

点赞数

分类专栏： css 文章标签： html css css3 html5

本文链接：https://blog.csdn.net/yujiaj/article/details/104468928

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

逆战班学生带你了解css浮动属性

你是不是还在为不了解css的浮动属性而苦恼呢？那我今天带大家来了解一下css的浮动属性吧，看好了哦！
1、不加浮动属性的盒子，每个盒子都会独占一行哦，大家可以看一下下面的代码和图片吧。
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css浮动属性</title>
		<style type="text/css">
			.big_box{/*大盒子*/
				width: 700px;
				height: 400px;
				background-color: red;/*给大盒子一个红色背景*/
			}
			.box01{
				width: 300px;
				height: 400px;
				margin-right: 50px;/*给盒子50的右边距*/
				background-color: green;/*给盒子一个绿色背景*/
			}
		</style>
	</head>
	<body>
		<div class="big_box"><!--大盒子-->
			<div class="box01">01</div><!--盒子1-->
			<div class="box01">02</div><!--盒子2-->
		</div>
	</body>
</html>

图片如下：可以从下图中看到不加浮动（float:none;）属性的样式，每个盒子都是单独占一行的。
在这里插入图片描述
2、css的浮动属性（float）有下面几个值：left（zuofudo）、right（右浮动）、inherit（规定应该从父元素继承 float 属性的值）、none（默认值，元素不浮动）即如1所示，div是默认为不浮动的。
（1）左浮动
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css浮动属性</title>
		<style type="text/css">
			.big_box{/*大盒子*/
				width: 700px;
				height: 400px;
				background-color: red;/*给大盒子一个红色背景*/
			}
			.box01{
				width: 300px;
				height: 400px;
				float: left;/*左浮动*/
				margin-right: 50px;/*给盒子50的右边距*/
				background-color: green;/*给盒子一个绿色背景*/
			}
		</style>
	</head>
	<body>
		<div class="big_box"><!--大盒子-->
			<div class="box01">01</div><!--盒子1-->
			<div class="box01">02</div><!--盒子2-->
		</div>
	</body>
</html>

图片：可以从下图中看到加左浮动（float：left;）属性的样式，盒子都是从左向右排列的，它会一直从左向右浮动，直到超出父元素的宽度就会自动换行，并且下一行的盒子也会遵循从左向右浮动的效果。
在这里插入图片描述
（2）右浮动
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css浮动属性</title>
		<style type="text/css">
			.big_box{/*大盒子*/
				width: 700px;
				height: 400px;
				background-color: red;/*给大盒子一个红色背景*/
			}
			.box01{
				width: 300px;
				height: 400px;
				float: right;/*左浮动*/
				margin-right: 50px;/*给盒子50的右边距*/
				background-color: green;/*给盒子一个绿色背景*/
			}
		</style>
	</head>
	<body>
		<div class="big_box"><!--大盒子-->
			<div class="box01">0111111</div><!--盒子1-->
			<div class="box01">0222222</div><!--盒子2-->
		</div>
	</body>
</html>

图片：可以从下图中看到加右浮动（float：right;）属性的样式，盒子都是从右向左排列的，它会一直从右向左浮动，直到超出父元素的宽度就会自动换行，并且下一行的盒子也会遵循从右向左浮动的效果。
在这里插入图片描述
（3）从父元素继承 float 属性的值
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css浮动属性</title>
		<style type="text/css">
			.big_box{/*大盒子*/
				width: 700px;
				height: 400px;
				float: right;/*右浮动*/
				background-color: red;/*给大盒子一个红色背景*/
			}
			.box01{
				width: 300px;
				height: 400px;
				float: inherit;/*继承父元素 float 属性的值*/
				margin-right: 50px;/*给盒子50的右边距*/
				background-color: green;/*给盒子一个绿色背景*/
			}
		</style>
	</head>
	<body>
		<div class="big_box"><!--大盒子-->
			<div class="box01">0111111</div><!--盒子1-->
			<div class="box01">0222222</div><!--盒子2-->
		</div>
	</body>
</html>

效果图：可以从下图中看到继承 float 父元素属性的值（float: inherit;）属性的样式，因为大盒子里的小盒子继承了大盒子的右浮动属性，大盒子包括大盒子里的小盒子都是从右向左排列的，它会一直从右向左浮动，直到超出父元素的宽度就会自动换行，并且下一行的盒子也会遵循从右向左浮动的效果。
在这里插入图片描述
by:余佳佳

yujiaj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css浮动属性

逆战班学生带你了解css浮动属性你是不是还在为不了解css的浮动属性而苦恼呢？那我今天带大家来了解一下css的浮动属性吧，看好了哦！1、不加浮动属性的盒子，每个盒子都会独占一行哦，大家可以看一下下面的代码和图片吧。代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> &l...
复制链接

扫一扫