CSS标准文档流,浮动与定位

标签（空格分隔）： CSS

---

标准文档流

定义:块级元素纵向有序排列，行内块（行内）元素横向有序排列

浮动

如果想让四个块级元素 div 并排显示,怎么做呢?
设置浮动

语法：float:left | right
特点:

• 给一个元素设置了浮动后，该元素不占位置（脱离标准流）
• 给一个元素设置了浮动，会影响该元素后面的元素
• 浮动可以让块级元素在一行上显示
• 浮动可是实现模式转换（span 设置浮动可以设置宽高）

浮动作用:

• 浮动最初的作用： 解决文字图片环绕效果。（文字不会浮动的影响）
• 制作网页导航（浮动+列表实现导航）
• 进行网页布局 （div+CSS(盒子模型+浮动+定位)）

注意：
◆让块级元素在一行上显示就使用浮动
◆如果一个元素要实现模式转换，就使用display

清除浮动

什么时候需要清除浮动：
◆父元素（内容父盒子）没有设置高度（必须条件）
◆该父元素中的所有子元素都设置了浮动（必须条件）

当父容器没有设置高度，里面的盒子没有设置浮动的情况下会将父容器的高度撑开。一旦父容器中的盒子设置浮动，脱离标准文档流，父容器立马没有高度，下面的盒子会跑到浮动的盒子下面。出现这种情况，我们需要清除浮动

清除浮动的方式

1. 给父容器设置高度
2. 通过设置clear:left | right | both
3. 给父容器设置 overflow:hidden
   如果父元素中没有定位的元素，或者定位的元素没有超出父元素的范围，那么可以使用overflow：hidden.
4. 通过伪元素

 .clearfix:after{
       content:"";
       height:0; line-height:0;
       visibily:hidden;
       clear:both;
       display:block;
  }
.clearfix{
   zoom:1    　　/*为了兼容IE浏览器 */
 }

定位

◆ 定位体现的是元素之间的层级关系（盒子压盒子的效果）
◆ 通过定位也可以移动元素

定位分类

position:static 静态定位
position:absolute 绝对定位
position:relative 相对定位
position:fixed 固定定位

1. 静态定位 (static)

就是按照标准流的方式显示

2. 绝对定位 (absolute)(看脸型)
   特点:

• 如果一个子元素设置了绝对定位，其父元素没有设置定位或者设置了静态定位，那么该子元素是以浏览器左上角为基准设置定位
• 如果一个子元素设置了绝对定位，其父元素设置了除静态定位以外的定位。那么该子元素是以父元素左上角为基准设置定位
• 绝对定位可以实现模式转换
• 绝对定位的元素不占位置（脱标）

3. 相对定位 (relative)(自恋型)

特点:

• 相对定位的元素只能以元素自己的位置为基准设置定位
• 相对定位的元素没有脱标，占位置
• 不能实现元素的模式转换
• 子绝父相（子元素设置绝对定位，父元素设置相对定位）

4. 固定定位 (fixed)

特点:

• 固定定位的元素只以浏览器左上角为基准设置定位
• 固定的元素不占位置（脱标）
• 实现模式转换