css浮动、清除浮动和定位

目录

1.浮动  float

 2.清除浮动

3.定位

---

1.浮动  float

float：none默认值 不浮动   left左浮动   right 右浮动

一般情况下，容器元素都是独占一行的，如图：

因为div是块元素，即使容器宽度很小，页面中一行可以容下三个div，div2也不会排在div1后边，是独占一行的。当实际页面需要横向摆放时，就需要用到浮动。

浮动就是让某个div元素脱离文档流不占位，漂浮在上。

当给容器设置浮动时，容器不会再占有原来的位置，后边的容器就会顶替该位置，如图：

给div1设置了左浮动时，div1就会脱离文档流，不占位，div2就会占据div1的位置，div1浮于div2上方

 当给div1设置右浮动时，div1就会脱离文档流，不占位，div2就会占据div1的位置，div1浮于右侧。需要注意的是，文字、图片、表单框、表单控件不能被覆盖。

当给三个div同时添加浮动时就可以在一行显示

左浮

右浮

 2.清除浮动

方法一：clear：both

在浮动元素后添加一个空div，并为其清除浮动

原理：在浮动元素的后面添加一个空 div 兄弟元素，利用 css 提高的 clear：both 清除浮动， 让父级 div 能自动获取到高度 。

<div class="box">
    <div class="box1">浮动</div>
    <div class="box2"></div>
    <div class="box3">受影响的div</div>
</div>

.box {
   width: 500px;
   height: 400px;
   border: 1px solid #333;
}
.box1{
   width: 100px;
   height: 100px;
   background-color: red;
   float: left;
}
.box3{
   width: 200px;
   height: 200px;
   background-color: yellow;
}

给.box2清除浮动

.box2{
    clear: both;
}

语法：

clear : none | left | right | both

取值：

none : 默认值。允许两边都可以有浮动对象

left : 不允许左边有浮动对象

right : 不允许右边有浮动对象

both : 不允许有浮动对象

方法二：使用：after伪元素，给浮动元素的父元素清楚浮动

方法三：通过父级元素添加overflow:hidden属性实现清除浮动

3.定位 position

position定位属性，检索或设置对象的定位方式

position 属性值

static	默认值。位置设置为 static 的元素会正常显示，它始终会处于文档流给予的位置（static元素会忽略任何 top、bottom、left或 right 声明）
absolute	相对于已经定位父级元素的绝对定位，浮出、脱离布局流，它不占据空间，就是我们所说的层，其位置相对于最近的已定位父元素而言的位置，可直接指定“left”、“top”、“right” 以及 “bottom”属性。若父级都没有定位，则以html（根元素）。(层叠的顺序z-index:value)
relative	是相对于默认位置的相对定位，通过设置left、top、right、bottom值可将其移至相对于其正常位置的地方（相对于自己的开始的位置发生的位置上的移动，【不会破坏正常的布局流，占据空间】）
fixed	相对浏览器的绝对定位，是相对于浏览器窗口的指定坐标进行定位。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。
sticky	可以看出是position:relative和position:fixed的结合体——当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixed。

绝对定位和相对定位的区别

1、参照物不同，绝对定位的参照物是包含块（已定位的父元素），相对定位的参照物是元素本身默认的位置；

2、绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间。

子绝父相：

1. 因为子位，不会占有位置， 可以放到父盒子里面的任何一个地方。

2. 父盒子布局时，需要占有位置，因此父亲只能是 相对定位.

定位元素层次关系

z-index : auto |number

检索或设置对象的层叠顺序。
auto：默认值。
number:无单位的整数值。可为负数
没有设置z-index时，最后写的对象优先显示在上层(都拥有定位)，设置后，数值越大，层越靠上；