一、float

1、本质: 实现文字环绕效果

2、作用机制

(1) 破坏文档流

(2) 让父元素的高度塌陷

(3) 行框盒子区域限制

3、特性

(1) 包裹性

(2) 块状化并格式化上下文

(3) 破坏文档流

(4) 没有任何 margin 合并

4、流体布局

(1) 核心: 一侧定宽一侧自适应

(2) 问题： 纯浮动布局容错性差，容易出现比较严重的布局问题

二、clear

1、目的：处理 float 属性带来的高度塌陷等问题

2、作用本质: 让自己不和 float 元素在一行显示

3、值

(1) none:默认值，左右浮动

(2) left: 去除左侧浮动

(3) right:去除右侧浮动

(4) both: 去除两遍浮动

4、tips

(1) 块级元素才有效

(2) 借助伪元素清除浮动，需要配合 display 一起使用

(3) 只能在一定程度上消除浮动的影响

三、BFC(block formatting context), 块级格式化上下文

1、作用

(1) BFC 元素，不发生 margin 重叠

(2) 可以用来清除浮动的影响

2、触发场景

(1) html 根元素

(2) float 的值不为 none;

(3) overflow 的值为 auto、scroll 或 hidden;

(4) display 的值为 table-cell、table-caption 和 inline-block 中的任何一个;

(5) position 的值不为 relative 和 static。

3、流体布局

(1) 自适应内容由于封闭而更健壮，容错性更强

(2) 自适应内容自动填满浮动以外区域，无须关心浮动元素宽度，可以整站大规模应用

四、overflow

1、支持的属性

(1) visible:默认值

(2) hidden:剪裁

  • 剪裁界线是 border box 内边缘

  • 可以用于清除浮动

(3) scroll:滚动条区域一直在

(4) auto:不足以滚动时没有滚动条，可以滚动时滚动条出现

2、tips

(1) 如果容器可滚动(假设是垂直滚动)，则 padding-bottom 也算在滚动尺寸之内

(2) 如果 overflow-x 和 overflow-y 属性中的一个值设置为 visible 而另外一个设置为 scroll、auto 或 hidden，则 visible 的样式表现会如同 auto

(3) 默认产生滚动条的标签: html、textarea

(4) 在 PC 端，无论是什么浏览器，默认滚动条均来自 html，而不是 body 标签

(5) 在PC端，窗体滚动高度可以使用 document.documentElement.scrollTop 获取，但是在移动端，可能就要使用 document.body.scrollTop 获取。

(6) 获取滚动条宽度的方式：width - document.getElementById(“ele”).clientWidth

3、自定义滚动条

(1) 整体部分，::-webkit-scrollbar

(2) 两端按钮，::-webkit-scrollbar-button

(3) 外层轨道，::-webkit-scrollbar-track

(4) 内层轨道，::-webkit-scrollbar-track-piece

(5) 滚动滑块，::-webkit-scrollbar-thumb

(6) 边角，::-webkit-scrollbar-corner

4、依赖 overflow 的样式效果: text-overflow:ellipsis 实现单行文字超出显示 ……

五、position:absolute

1、特性

(1) 块级格式化上下文

(2) 脱离文档流

(3) 包裹性

(4) 计算和定位是相对于祖先定位元素的 padding box

2、包含块(containing block)

(1) 是什么: 元素用来计算和定位的一个框

(2) 计算规则

  • 根元素(很多场景下可以看成是)被称为“初始包含块”，其尺寸等同于浏览器可视窗口的大小

  • 对于其他元素，如果该元素的 position 是 relative 或者 static，则“包含块”由其最近的块容器祖先盒的 content box 边界形成

  • 如果元素 position:fixed，则“包含块”是“初始包含块”

  • 如果元素 position:absolute，则“包含块”由最近的 position 不为 static的祖先元素建立

3、absolute 元素

(1) 只有在父元素是定位元素，absolute 元素才会被 overflow 影响

(2) absolute 元素设置了对立定位，会格式化宽度/高度，不设置宽度 width/height 会变为 100%

(3) absolute 元素设置 margin:auto

  • 如果一侧定值，一侧 auto，auto 为剩余空间大小;

  • 如果两侧均是 auto，则平分剩余空间。

4、与 clip 属性配合

(1) 可以剪裁 fixed

(2) 配合 absolute，可以实现可访问性元素隐藏，比如经常要用到一些 checkbox 之类的，但是原本的样式太丑了，可以选择用着这种方案隐藏掉原来的 checkbox，但是又不影响点击

5、tips

(1) 无依赖绝对定位:只对当前元素设置绝对定位和偏移值，不影响其他元素的样式

(2) 有的时候 fixed 元素或者 absolute 元素莫名的滚动了，可能是 transform 属性在作妖

(3) 父元素 relative 定位会限制 absolute 子元素

(4) 为了减小当前元素的样式对其他元素样式的影响，可以尽量减小 relative 的作用范围