浮动与定位

浮动与定位

处理块元素独占一行，可以使用display，也可以使用浮动和定位

浮动 float

浮动是指：当前元素，脱离文档流，默认在当前的行对既定的方向进行移动（默认横排）

浮动的影响

1. 自身的父元素无法获取宽高
2. 后续的元素会自动补位
3. 浮动会脱离当前文档流，覆盖标准流的元素
4. auto会失效
   （auto）：根据自身的所占位置，自动居中，但必须注意
   • 自身必须有宽高
   • inline-block 或 float 都会使auto失效 需要使用具体值来调整元素的位置
5. 块元素可以横排显示(失去独占一行的特性)
6. 行元素可以设置宽度和高度
7. 除了auto以外，依然支持margin
8. 提升半个层级 z-index

清除浮动

使用浮动布局，那么一定要清除浮动，否则原地爆炸！
方法一：

• 给父级设定宽高
• 缺点：
  父级如果作为容器，直接就写死了，后续元素添加会出问题，
  而且无法解决元素重叠的问题 (不推荐使用！了解即可)

方法二：

• 给父级设定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标签语义化

<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
• 缺点：
  父元素的同级之间会留有间隔

<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>

• 缺点：
  使用时需要制作工具

定位 position

！！ 无论什么定位，都要优先考虑它的参考对象 ！！

1. 默认定位
   所谓默认定位是指：不使用定位（有点脑壳疼，但这是最容易的忘掉的）

2. 相对定位
   相对的是自身原有的位置
   相对定位移动后，会保留原有位置 ( 可以使用定位占用，但普通写法 时，无法占用 )
   不会影响文档流
   适用场景：

   • 小范围移动
   • 移动后，原有位置不再使用

	position: relative;
	/* 1)   开启该元素的定位*/
	/*书写具体的位置*/
	/*只有 left 和 top 两个属性 */
	/*top: 300px;*/
	left: 300px;

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

	/*	position: absolute;*/
	/*left: 300px;*/
	top:30px;
	/*  z-index :  数字;
	作用：  调整当前元素的层级
	注意：  1. 属性值没有单位，只写数字。记得分号结尾
			2. 如果需要调整的元素个数较多时，需要将每个元素的层级，都明确划分
	*/
	z-index: 1;

4. 固定定位
   固定定位永远都会相对于浏览器窗口进行定位，固定定位会固定在浏览器的某个位置，不会随滚动条滚动。
   最常用的就是网站或者APP的导航栏和底部的选择栏。

	position: fixed;
	bottom: 0px;
	left: 0px;
	/* top: auto; */