浮动、定位

最新推荐文章于 2021-07-23 16:44:37 发布

原创最新推荐文章于 2021-07-23 16:44:37 发布 · 219 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨了CSS中的浮动和定位技术，包括标准文档流、浮动的定义与影响、清除浮动的方法，以及相对、绝对和固定定位的使用场景与注意事项。

浮动

什么是标准文档流？

标准文档流（Normal Document Stream），简称“标准流”，是指在不使用其他与排列和定位相关的特殊CSS规则时，各种元素的排列规则。
浮动定义：使元素脱离文档流。
float: 浮动，所有的元素都可以浮动；具有float属性元素在父标签中是不占空间的；float能解决标签之间有间隙的问题。
none: 不浮动; 默认
left: 向左浮动;
right: 向右浮动;
auto: 根据自身所占位置，自动居中
1.自身必须有宽高
2.inline-block 或 float 都会使auto失效，需要填写具体值来调整元素位置。

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

浮动产生的影响：
1.自身的父元素无法获取宽高
2.后续的元素会自动补位
3.浮动会脱离当前文档流，覆盖标准流的元素
4.auto会失效
5.块元素可以横排显示(失去独占一行的特性)
6.行元素可以设置宽度和高度
7.除了auto以外，依然支持margin
8.提升半个层级 z-index
Z-index：数字。
作用：调整当前元素的层级。
注意：1.属性值没有单位，只写数字，记得分号结尾。
2.如果需要调整的元素个数较多时，需要将每个元素的层级都明确划分。
注：使用浮动布局，那么一定要清除浮动，否则原地爆炸！
清除浮动的常见方法有以下几种：

给父级设定宽高
缺点：父级如果作为容器，直接就写死了，后续元素添加会出问题，而且无法解决元素重叠的问题不推荐使用！了解即可
使用overflow ：hidden 属性 (超出内容区域的部分，隐藏)给父元素添加。
缺点：如果内容需要超出，或者较多时.需求发生冲突。如果内容没有超过，推荐使用，较为方便。
适用场景：浮动元素较少.

<div id="main" style="overflow: hidden;">
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
	<div class="box4"></div>
</div>

使用clear: both 属性;
clear: 是否允许浮动
left: 不允许左侧有浮动
right: 不允许右侧有浮动
both: 不允许两侧有浮动
缺点：需要写一个空标签来绑定 clear属性. 这个空标签没有html的作用，不符合html标签语义化。

<!-- 3. 使用空标签 添加clear属性 -->
<div id="main">
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
	<div class="box4"></div>
	<div style="clear: both; width: 0px; height: 0px"></div>
</div>

给父级设置 display: inline-block;
缺点: 父元素的同级之间会留有间隔

<!-- 4. 父元素添加 display： inline-block 属性 -->
<div id="main" style="display: inline-block;">
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		<div class="box4"></div>
</div>

各大主流浏览器之间，兼容性最高的一款，你值得拥有~
:after伪类：在…之后添加…

//制作工具
		 .clearfix:after{
				content: "";
				display: block;
				height: 0px;
				clear: both;
		 };
//激活工具
		 .clearfix{
			zoom:1;
		 }
 //使用工具
<div class="box clearfix">
	<div class="left">我是左浮动</div>
</div>

定位

注：无论什么定位，都要优先考虑它的参考对象！！
1. 相对定位
（1）相对的是自身原有的位置
（2）相对定位移动后，会保留原有位置(可以使用定位占用，但普通写法时，无法占用)
（3）不会影响文档流
定位元素位置控制：top/right/bottom/left 定位元素偏移量。
适用场景： 1、小范围移动 2、移动后，原有位置不再使用

#box{
	  		width: 200px;
	  		height: 200px;
	  		background-color: red;
			position: relative;         // 开启该元素的定位		 
	  		left: 300px;                  //书写具体的位置
	  		top: 300px;
}

2.绝对定位
1. 脱离当前文档流，使元素"飘"起来,父级没有获取宽高
2. 绝对定位的参考值：会去找具有相对定位属性的父元素,如果没有，继续往上找，直到整个文档。90%以上的绝对使用场景，都需要相对定位来配合。也就是人们趣称为： “父相子绝”。
适用场景：
1.大范围移动或小范围移动同样适用，但是需要其父元素的配合。
2. 动态去拖拽元素时。或一些需要重叠的动画效果。
备注： left / top 使用时，可以不紧跟着定位属性走，中间可以间隔，甚至写在不同选择器中，但是，一定得写开启定位。

#box{
	  		width: 200px;
	  		height: 200px;
	  		background-color: red;
			position: absolute;         // 开启该元素的定位		 
	  		left: 300px;                  //书写具体的位置
	  		top: 300px;
}

3.固定定位 position: fixed; 使用场景：网页的侧边栏，网页导航。

#box{
	  		width: 200px;
	  		height: 200px;
	  		background-color: red;
			position: fixed;         	 
	  		top:0;              
}

4.静态定位（默认）
概念：元素正常生成
书写：position ： static
说明：块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。