CSS浮动+定位

1.浮动

CSS三种传统布局：普通流 浮动 定位

标准流：标签按照默认排序

多个块级元素纵向排列用标准流，横向排列用浮动

选择器{
    float: 属性值;   //none不浮动   left向左浮动    right向右浮动
}//创建浮动框，将其移动到一边，知道左边缘或右边缘触及包含块或另一个浮动框的边缘

1.浮动元素会脱离标准流

原来（排在浮动后面的）标准流的标签会顶上你原来的位置（但标准流之后的浮动挤不上去）

（但是！！不会覆盖掉你的文字！，因为本身浮动是为环绕图片而设计的）

2.浮动元素会一行内显示并且元素顶部对齐

紧贴在一起，不会有缝隙，装不开会另起一行

3.浮动元素具有行内块元素的特性

添加浮动后自动附带行内块元素的特性

4.浮动自带文字环绕效果

浮动的使用：

一般采取先用标准流父元素排列上下位置，之后在子元素采取浮动，使得浮动在网页中间而不是左右侧

一般一个元素浮动了，他的兄弟标签最好也使用浮动

2.清除浮动

布局

1.父盒子不给高度，子盒子会自动撑开

2.父盒子不给高度的话，子盒子如果是浮动，父盒子会发生高度塌陷，导致高度变成0

所以总结：需要清除浮动！！！

clear: 属性值 一般属性值取both（常用）清楚两侧浮动，也有left，right

1.额外标签法，隔墙法，W3C推荐做法

在浮动标签最后加多个一子标签（必须是块级元素），如：

.clear{
    clear: both;
}
<div class="clear"></div>

优点：通俗易懂，书写方便 缺点：结构化差

2.父级添加overflow

（生成BFC元素）

//父级盒子
.box{
    overflow: hidden;            //或者auto
}

优点：代码简洁 缺点：无法显示出溢出部分

3.：after伪元素法

额外标签的升级版，给父元素添加

.clearfix::after {
    content: "";
    display: block;                //伪元素默认是行内元素，所以得转
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    *zoom: 1;                    //兼容ie6，ie7
}
/*一般类名定义为clearfix*/

优点：结构简单 缺点：需要照顾低版本浏览器 代表网站：百度，淘宝，网易

4.双伪元素清除浮动

.clearfix::before,
.clearfix::after {
    content: "";
    display: table;                //转化为块级，并且一行显示            
}
.clear::after {
    clear: both;
}
.clearfix {
    *zoom: 1;                    //兼容ie6，ie7
}

优缺点同上，代表网站：小米，腾讯

3.CSS定位

1.某个元素可以在盒子内移动位置，并且压住其他盒子。

2.滚动窗口时，盒子固定于屏幕某个位置。

定位=定位模式+边偏移量

定位

选择器{
    position: static;    
    position: relative;            
    position: absolute;    
    position: fixed;
    position: sticky;
    top: 100px;            //必备的指定位置，可以为left，right，bottom
}

position: static; //默认，无定位,标准流特性

position: relative; //相对定位，参照点是自己，移动位置后，原来的位置继续占有（没有脱标）

position: absolute; //绝对定位，是相对于他的祖先元素。

1.没有祖先元素或者，祖先元素没有使用定位，则以浏览器为准直接偏移

2.如果祖先元素有定位（相对，绝对，固定），则以最近一级定位的祖先元素为参考点

3.绝对定位不再占有原来的位置（脱标）

4.加了绝对定位的盒子不能通过 margin: 0 auto; 来居中，让它居中的原理和fixed设置版心的原理差不多，都是left：50%+margin组合

position: fixed; //固定于浏览器可视区位置，不占有原先位置

1.还可以设置于版心附近，方法：让那个固定定位的盒子 left: 50%,然后让固定定位的盒子margin-left：版心的一半距离

position: sticky; //粘性定位，被认为相对定位和固定定位的混合体 relative -> fixed

1.以浏览器可视窗口为参照移动的元素（固定特点）

2.粘性定位占有原先的位置

3.必须添加top，left等，不然相当于相对定位

4.常用于导航栏的滚动

缺点：很多比较老的浏览器都不支持（移动端不考虑）

(子绝父相—–出自pink老师) ->>>>>>>

—–> 子级使用绝对定位，父亲则需要使用相对定位

位置

如果一个定位既设置了left，也设置了right，它默认会执行left。若及设置了top，也设置了bottom，会默认执行top（无关权重的事情）

定位叠放次序

通过控制z-index来控制盒子的前后次序（叠放次序）z-index： 1;

1.数值越大盒子越靠上

2.如果值相同，按照书写顺序，后来居上

3.数字不能加单位

4.只有定位盒子才有z-index属性（还有flex）

5.如果该盒子父盒子层级使用了定位+z-index，但是父盒子的z-index值比较低，在“拼爹”的规则底下，即使子盒子本身z-index再大，也会被压着

定位的特殊性质

1.行内元素添加绝对或固定定位，可以直接设置高度和宽度

2.块级元素添加绝对或固定定位，未设置宽高，会脱标，默认内容大小（类似浮动）（不会发生外边距合并）

3.和浮动不同，绝对或固定定位会压住你标准流文字等内容

4.元素的显示和隐藏

1.display

display: none; 隐藏对象（不再占有原来的位置，可以用于js的下拉菜单等功能）

display: block; 显示对象（也可以是转换块元素）

2.visible

visibility: visible; 元素可视

visibility: hidden; 元素隐藏（仍然占有原来位置）

3.overflow

overflow: visible; 超出你的标签部分（固定大小）可见

overflow: hidden; 超出你的标签部分（固定大小）隐藏，如果有定位的盒子慎用，他会切掉你溢出布局标签的部分

overflow: scroll; 可添加滚动条

overflow: auto; 需要的时候添加滚动条

5.文档流

浮动和定位一些属性会脱离文档流

其实还有一个文本流，它其实就是一系列字符，是文档的读取和输出顺序，也就是我们通常看到的由左到右、由上而下的读取和输出形式。

只有postion一些属性可以从文本流脱离出来

文档流是相对于盒子模型讲的
文本流是相对于文字段落讲的

所以我们可以看到浮动的时候文字环绕的形式，说明浮动并没有脱离文本流；但是position中的absolute和fixed全部脱离。

mdn:

下列元素会脱离常规流:

• floated items。浮动的元素
• items with position: absolute (including position: fixed which acts in the same way)。通过设置position属性为absolute或者fixed的元素
• the root element (html)根元素