css的浮动属性

最新推荐文章于 2023-03-21 10:52:50 发布

JTz666666

最新推荐文章于 2023-03-21 10:52:50 发布

阅读量326

点赞数 1

分类专栏： CSS 文章标签： css css3

本文链接：https://blog.csdn.net/jtz666666/article/details/104201666

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

行内元素：没有宽高属性，并且不会独占一行，任何元素一旦浮动，display属性将完全失效均可以设置宽高，并且不会独占一行

下面举例说明一下，先布局下页面：

			<style type="text/css">
			*{
				margin:0 ;
				padding: 0;
			}
			#box{
				width: 300px;
				height: 300px;
				background: deeppink;
			}
			#box>div:nth-child(1){
				width: 100px;
				height: 100px;
				background: green;
			}
			#box>div:nth-child(2){
				width: 100px;
				height: 100px;
				background:blue ;
			}
			#box>div:nth-child(3){
				width: 100px;
				height: 100px;
				background: red;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div></div>
			<div></div>
			<div></div>
		</div>
	</body>

此时，页面上显示的是：

在这里插入图片描述

但是，当我们把第一个子元素的div设置为左浮动时候，我们发现：

			#box>div:nth-child(1){
				width: 100px;
				height: 100px;
				background: green;
				/*
				 * 设置左浮动
				 */
				float: left;
			}

此时页面上变成了：

在这里插入图片描述

这时候蓝色的div不见了，它其实是在的，当我把蓝色的div的高度设置为150px的时候，我们发现：

在这里插入图片描述

其实只是因为将元素排除在普通流之外，元素将不再页面上占据空间，第一个div浮动了，不占据空间了，那后边的div自动就网上跑了。

当我们把第一个元素的浮动设为右浮动，可能会更清楚：
在这里插入图片描述

JTz666666

关注

1
点赞
踩
0

收藏

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

行内元素：没有宽高属性，并且不会独占一行，任何元素一旦浮动，display属性将完全失效均可以设置宽高，并且不会独占一行下面举例说明一下，先布局下页面： <style type="text/css"> *{ margin:0 ; padding: 0; } #box{ width: 300px; height: 300px; ...
复制链接

扫一扫