CSS中的浮动与定位

最新推荐文章于 2024-07-26 21:34:02 发布

原创最新推荐文章于 2024-07-26 21:34:02 发布 · 363 阅读

0 ·

CC 4.0 BY-SA版权

CSS中的浮动与定位

浮动（float）

float ：浮动的元素可以向左或者向右移动，直到他的外边框碰到父元素或者说是碰到另一个浮动的元素的外边框。（浮动是脱离文档流的）
float ：常用的有三个属性值 none（默认值）
float（左浮动）
right（右浮动）

<style type="text/css">
			.box{
				width: 300px;
				height: 300px;
				border: 1px solid black;
			}
			.box div{
				height: 100px ;
				width: 100px;	
			}
			.div_first{
				background-color: red;
			}
			.div_second{
				background-color: blue;
			}
			.div_third{
				background-color: yellow;
			}
		</style>
<div class="box">
		    <div class="div_first">第一个</div>
		    <div class="div_second">第二个</div>
		    <div class="div_third">第三个</div>
		</div>

初始样式
在这里插入图片描述
给第一个div一个左浮动：

.div_first{
				background-color: red;
				float: left;
			}

如下：
在这里插入图片描述
因为浮动之后脱离文档流，第二个div 就到原来第一个div的位置，而第一个div就浮在第二个div上面（遮住第二个div）

.div_first{
				background-color: red;
				float: left;
			}
			.div_second{
				background-color: blue;
				float: right;
			}

在这里插入图片描述
因为第一个左浮动，脱离了文档流，第二个右浮动，靠近父元素的右边边框，也同样是脱离文档流的，因此第三个还在文档流中自然而然的就上去了（被第一个遮挡住了）
若我们将第三个元素清除浮动，他将在出现在原本第二个元素出现的地方

.div_third{
				background-color: yellow;
				clear: both;
			}

在这里插入图片描述
关于清除浮动 clear属性有both left right all 等等属性
而清除浮动的方法也有多种多样（这里就不做多的介绍）

定位position

position的属性值有 relative absolute fixed
position：relative 相对定位
不脱离文档流，相对自身原来的位置做较小移动（保留之前的位置）

.div_first{
				background-color: red;
				position: relative;
				left: 100px;
			}

在这里插入图片描述
position：absolute绝对定位
脱离文档流，若其父元素没有已定位元素，则其定位相较于其祖先元素进行移动，若有则选择较近的父元素，进行移动。

.div_second{
				background-color: blue;
				position: absolute;
				top: 100px;
				left: 100px;
				
			}

在这里插入图片描述
这个是相较于body进行移动
若给父元素一个相对定位，则有（相对于父元素的位置进行top left right bottom位移）

.box{
				width: 300px;
				height: 300px;
				border: 1px solid black;
				position: relative;
			}

在这里插入图片描述
position：fixed 固定定位
元素定位是参考于浏览器的可视区域，脱离文档流

.box{
				width: 300px;
				height: 300px;
				border: 1px solid black;
				background-color: #000000;
				position: fixed;
				bottom: 0px ;
				right: 0;
			}
<div class="box"></div>

在这里插入图片描述