学习CSS4（浮动、定位、高度坍塌）

浮动

修改float属性值为：

• left：左浮动，元素靠上靠左排列
• right：右浮动，元素靠上靠右排列
  默认值为none
  特点：

1. 当一个元素浮动后，元素必定为块盒。（会自动更改display属性为block）
2. 浮动元素包含块和常规流一样，为父元素的内容盒

浮动盒子的尺寸

1. 宽度、 高度为auto时，适应内容宽高度（与常规流一样）
2. margin为auto时，为0
3. 边框、内边距、百分比设置与常规流一样

浮动盒子排列

1. 浮动盒子在包含块中排列时会避开常规流块盒子
2. 常规流块盒在排列时无视浮动盒子
3. 行盒在排列时会避开浮动盒子

高度坍塌问题

根源：常规流盒子的自动高度，在计算时，不会考虑浮动盒子，（只会考虑常规流盒子）。
清除浮动的方法：

1. 通过after伪类设置为块级元素清除两边浮动解决父元素高度坍塌。

<div class="clearfix"></div>  
.clearfix::after{
            content:"";
            display:block;
            clear: both;
        }

2. 创建BFC元素，它的自动高度会计算浮动元素
   比如设置为绝对定位、浮动，但是一般不使用这两种方法，因为会影响到其他的布局，所以一般会使用副作用最小的方式：overflow：auto、hidden（最常用）……

可以写成

<style>
.clearfix{
      overflow: hidden;
  }
  </style>

两种方法一般还是用第一种，副作用会小一点。

定位

定位：手动控制元素在包含块中的精准位置

涉及的CSS属性：position

position

• 默认值：static，静态定位（不定位）
• relative：相对定位
• absolute：绝对定位
• fixd：固定定位

定位元素会脱离文档流（相对定位除外）

一个脱离了文档流的元素：

1. 文档流中的元素摆放时会忽略脱离了文档流的元素。
2. 文档流中元素计算自动高度时，会忽略脱离了文档流的元素。

相对定位

不会导致元素脱离文档流，只是让元素在原来位置上进行偏离。

可以通过四个css属性设置其位置：

• left
• right
• top
• bottom

盒子的偏移不会对其他的盒子造成影响。

相对定位一般是为绝对定位提供一个包含块。

绝对定位

1. 宽高为auto，适应内容
2. 包含块变化：找祖先元素中第一个定位元素，该元素的填充盒为其包含块。若找不到，则它的包含块为真个网页（初始化包含块）

固定定位

其他情况和绝对定位完全一样。
包含块不同：固定为视口（浏览器的可视窗口（滚动的时候位置不随网页移动））

常见的固定定位：
页面的弹出层，比如广告，或者是哪种登录的界面

定位下的居中

某个方向居中：

1. 定宽（水平）或者定高（垂直方向）
2. 将左右上下距离设置为0
3. 将左右上下margin设置为auto
   绝对定位和固定定位时，margin为auto时，会自动吸收剩余空间。

• 绝对定位、固定定位元素一定是块盒
• 绝对定位、固定定位元素一定不是浮动（当同时设置了float=left 和position=absolute的时候，float会强制转为none）
• 没有外边距合并