清除浮动

1. 父级包裹浮动盒子元素用overflow:hidden清除
2. clear:both;清除两边的浮动
3. BFC 独立：有包裹性(不设置宽高)
4. BFC 子元素的任何排版不影响
5. 触发 BFC：绝对,相对定位display:table;
6. 触发 BFC：只要不是overflow:visible;

定位

子绝父相定位

• 相对定位relative:相对于原来位置移动
• 绝对定位absolute:相对于 relative 特性的父容器定位
• 相对定位:只改变位置不影响文档流布局;
• 绝对定位:包裹性:实际内容撑开;破坏性:脱离文档流; 悬浮性:在原始流之上;
• 当元素的 position 设置为relative时，它允许你通过 CSS 指定该元素在当前普通流页面下的相对偏移量。
• CSS 的 position 属性的取值选项absolute，absolute 相对于其包含块定位。和 relative 定位不一样，absolute 定位会将元素从当前的文档流里面移除，周围的元素会忽略它。
• absolute 定位比较特殊的一点是元素的定位参照于最近的已定位祖先元素。如果它的父元素没有添加定位规则（默认是 position:relative;）,浏览器会继续寻找直到默认的 body 标签。
• fixed定位，它是一种特殊的绝对（absolute）定位，区别是其包含块是浏览器窗口。
• float:浮动定位
• z-index属性指定元素的堆叠次序。z-index 的取值是整数，数值大的元素优先于数值小的元素显示。
• 使用 margin 属性将元素水平居中

3.1 块级元素

• 由于“块级元素”具有换行特性，因此理论上它都可以配合 clear 属性来清除浮动带来的影响
• <div>,<li>,<table>:符合块级元素的基本特征，也就是一个水平流上只能单独显示一个元素，多个块级元素则换行显示。

3.2.1 width:auto

1. 100%于父级宽度
2. 包裹性
3. 收缩到最小:min-content
4. 超出容器限制:设置 white-space:nowrap;属性后--无视父级宽度,叫做 max-content; 无宽度 流体布局 *宽度分离

• 复用,减少冗余

变量-Variables

• 只可定义一次
• @开头定义变量,使用时直接键入@名称

值变量

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}
编译为： #header {
  width: 10px;
  height: 20px;
}