CSS布局

浮动（目的让多个块元素一行内显示）
一、CSS布局有三种机制

1.普通流（标准流）

1.1.文档流是网页中的一个位置，默认情况页面中的所有元素都在文档流中排列

• 块元素在文档流中的特点
  1.自上向下进行排列（独占一行）
  2.默认宽度和元素一样
  3.默认高度被内容撑开
• 行内元素在文档流中的特点
  1.自左向右水平排列，如果一行中不足以容纳所有的元素则切换到下一行继续自作向右水平排列
  2.默认的高度和宽度是内容的本身

2.浮动

2.1.概念：元素的浮动是指设置了浮动属性 的元素

• 脱离标准普通流的控制
• 移动到指定位置

语法如下：

选择器 {float：属性值；
}

属性值	描述
left	左浮动
right	浮动

2.2 float-浮漏特

特点	说明
浮	加了浮动的盒子是浮起来的，漂浮在标准流盒子上面
漏	加了浮的盒子是不占位置的，他原来的位置让给了下面的标准流盒子
特	特别注意：浮动元素会改变display属性，类似转成了行内块，但是元素之间没有缝隙

注意

• 浮动的元素互相贴靠一起的，但是如果父级元素宽度装不下这些浮盒子，多出来的盒子会另起一行对齐
• 浮动的元素位置不会超过其上的其他的浮动元素，最多一边齐
• 文字不会被浮动元素所覆盖，而是围绕在浮动元素周围，从而我们可以使用浮动来围绕文字

2.3 浮动和标准流的父盒子搭配使用
我们需要给浮动的元素添加一个标准流的父亲，这样最大化的减小了对其他标准流的影响

2.4 浮动的扩展
（1）浮动元素于父盒子的关系

• 子盒子的浮动参照父盒子对齐的
• 不会于父盒子的边框重叠，也不会超过父盒子的内边距

（2）浮动元素于兄弟盒子的关系
在一个父级盒子中，如果当前一个兄弟盒子：

• 浮动的，那么当前这个盒子会于前一个盒子的顶部对齐
• 是普通流的，那么当前盒子会显示在前一个兄弟盒子的下方位置不变。浮动只会影响当前的或是后面的标准流盒子，不会影响前面的标准流盒子。

浮动只会影响当前的或者是后面的标准流盒子，不会影响前面标准流
建议：如果一个盒子里面有多个盒子，如果其中一个盒子浮动了，其他兄弟盒子也应该一起浮动，防止引起问题。

2.5 元素脱离文档流以后的特点：

• 默认宽度被内容撑开
• 默认高度被内容撑开
• 块元素不会独占一行
• 元素不会在占据文档流位置

行内元素浮动以后也会脱离文档流

• 脱离文档流以后行内元素自动变成块元素，特点和块元素一样

二、清除浮动
1.清除浮动主要是为了解决父级元素因为子级浮动引起内部高度为0的问题。清除浮动之后父级就会根据浮动的子盒子自动检测高度，就不会影响下面的标准流盒子了

清除浮动的方法
2.在CSS中，clear属性用于清除浮动
语法如下

选择器{clear:both;}

both:同时清除左右俩边的浮动

（1）额外标签法（隔墙法）
是通过在浮动末尾添加一个空的标签 例如：

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

(2)父级添加overflow属性方法：

overflow:hidden;

(3)使用after伪元素清除浮动 父级调用即可

.clearfix:after{
content:"";
dissplay:block;
height:o:
visibility:hldden;
clear:both;}
.clearfix{
*zoom:l;}

(4)使用双伪元素 父级调用即可(既可以解决清除浮动也可以解决内嵌外边距折叠问题)
代码如下

.clearfix:before,
.clearfix:after {
content:"";
display:table;}
.clearfix:after{
clear:both;}
.clearfix{*zoom:l;}

为什么要清除浮动？我们什么时候用到浮动
1.父级没有高度
2.子盒子浮动了
3.影响下面的布局了。

3.定位

3.1 概念：通过定位我们可以将元素摆放到页面中的任意位置可以使用 position 属性来设置元素定位 使用- 偏移量（offset）来改变元素的位置

语法如下：

选择器{position：属性值；}

定位position

属性值	描述
relative	开启元素的相对定位
absolute	开始元素的绝对定位
fixed	开启元素的固定定位

偏移量(offset)

属性值	描述
top	元素上边和定位位置上边的距离
bottom	元素下边和定位位置下边的距离
left	元素左边和定位位置左边的距离
right	元素右边和定位位置右边的距离

3.2 相对定位

1. 开启了相对定位的元素，如果不设置偏移量元素不会发生任何变化
2. 相对定位的元素不会脱离文档流(就是保持原来的位置，不会影响到下面的盒子)
3. 相对定位不会改变元素的性值
4. 相对定位的元素会提升一个层级
5. 相对定位的元素是相对于自身在文档流中的位置进行定位的

3.3绝对定位

1. 开启了绝对定位的元素，如果不设置偏移量 元素的位置不会发生任何变化

2. 绝对定位会使元素脱离文档流(跟浮动一样漂起来了 下面的元素就会上来 不再保留原来的位置)

3. 绝对定位会改变元素的性值，行内元素变成块级元素，块元素宽高被内容撑开的

4. 绝对定位会使元素提升一个层级

5. 绝对定位元素相对其包含块进行定位
   包含块解释：默认情况下包含块就是离当前元素最近的块级祖先元素 对于绝对定位元素来说，包含块是离它最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位，则其包含块就是初始包含块(html)。

6. 使用绝对定位有个口诀：子绝父相

3.4固定定位

1. 固定定位的大部分特点和绝对定位一样，不同点是固定 定位是相对于视口(浏览器)进行定位的，并且固定定位元素会固定在网页的视口（浏览器）上，不会随网页滚动

注意：：在布局中标准流(文档流)在最底层 浮动在中层 定位在上层

4.元素的层级

我们可以通过z-index来设置定位元素的层级

它需要一个整数作为参数，值越大层级越高，层级越高越优先显示，层级一样优先
显示后边的，

祖先元素的层级再高也不会盖住后代元素