float

兼容性问题：

  • 包裹性
  • 块状化并格式化上下文
  • 破坏文档流
  • 没有任何 margin 合并

clear

clear 只对块级元素有效，而 :after 等伪元素默认是内联元素。clear:both 的本质是不让自己和 float 元素在一行显示，并不是真正意义的清除浮动。

BFC

block formatting context，格式化上下文。
触发 BFC 的情况：

  • HTML 根元素
  • float 的值不为 none
  • overflow 的值为 auto、scroll、hidden
  • display 的值为 table-cell、table-caption、inline-block 中的任何一个
  • position 的值不为 relative 和 static

自适应布局

  1. <style>
  2.  img {
  3.      float: left;
  4.      margin-right: 10px;
  5.  }
  7.  .animal {
  8.      overflow: hidden;
  9.  }
  10. </style>
  12. <div class="father">
  13.   <img src="img/chlid.jpg">
  14.   <p class="animal">
  15.     小猫1，小猫2
  16.   </p>
  17. </div>

overflow

彻底清除浮动的影响，最合适的属性不是 clear 而是 overflow。

裁剪界限

当元素超出容器宽度和高度限制，裁剪的边缘是 border box 的内边缘。

overflow-x 和 overflow-y

  • visible：默认值
  • hidden：裁剪
  • scroll：滚动条区域一直在
  • auto：不足以滚动时没有滚动条，可以滚动时滚动出现

如果 overflow-x 和 overflow-y 的表现规则要比看上去更复杂，如果其中任何一个设置了 visible，而另一个不是 visible，那么 visible 会被当成 auto 来解析。

滚动条

HTML 元素和 textarea 默认产生滚动条，其 overflow 的值默认为 auto。

去除页面默认滚动条

  1. html {
  2.   overflow: hidden;
  3. }

IE 以上浏览器滚动条默认宽度都是 17px。

自定义

  1. ::-webkit-scrollbar { /* 宽度 */
  2.     width: 8px;
  3.     height: 8px;
  4. }
  6. ::-webkit-scrollbar-thumb { /* 拖动条 */
  7.     background-color: rgba(0, 0, 0, .3);
  8.     border-radius: 6px;
  9. }
  11. ::-webkit-scrollbar-track { /* 背景槽 */
  12.     background-color: #ddd;
  13.     border-radius: 6px;
  14. }

依赖 overflow 的样式表现

实现单行文字溢出省略

  1. .ell {
  2.     text-overflow: ellipsis;
  3.     white-space: nowrap;
  4.     overflow: hidden;
  5. }

多行文字隐藏

  1. .ell-rows-2 {
  2.     display: -webkit-box;
  3.     -webkit-box-orient: vertical;
  4.     -webkit-line-clamp: 2; 
  5. }

锚点定位

触发条件：

  • URL 地址中的锚链与锚点（非隐藏元素）与元素对应并有交互行为
  • 可 focus 的锚点元素处于 focus 状态

锚点定位的本质是通过改变容器滚动高度或者宽度实现的。 overflow:hidden 的元素也会发生锚点定位。锚点定位本质上是改变了 scrollTop 或 scrollLeft 值。锚链定位的方式会触发窗体的定位，而 focus 的定位方式不会触发窗体的定位。

绝对定位

和 float:left/right 一样，position:absolute 具备“块状化”、“包裹性”、“破坏性”等特征。

包裹块

  • 根元素（很多场景下可以看成是 ）被称为“初始包含块”，其尺寸等同于浏览器可视窗口的大小。
  • 对于其它元素，如果元素的 position 是 relative 或者 static，则“包裹块”由最近的块容器祖先盒的 content box 边界形成。
  • 如果元素 position:fixed，则“包含块”是“初始化包含块”。
  • 如果元素 position:absolute，则“包含块”由最近的 position 不为 static 的祖先元素建立。
    • 祖先元素是纯 inline 元素
      • 假设给内联元素的前后各生成一个宽度为 0 的内联盒子，则这两个内联盒子的 padding box 外面的包围盒就是内联元素的“包含块”。
      • 如果该内联元素被跨行分割了，那么“包含块”是未定义的，也就是 CSS2.1 没有明确定义，浏览器自己发挥。
    • 非纯 inline 元素，“包含块”由祖先的 padding box 边界形成。

“包含块”可以受 ::frist-line 的影响，但不受 ::frist-letter 伪元素的影响。

对于绝对定位的元素，height:100% 是第一个具有定位属性值的祖先元素的高度，而 height:inherit 则是单纯的父元素的高度继承。

包裹性造成的“文字最大可用范围”问题可以用 white-space:nowrap 解决。

具有相对特性的无依赖 absolute 绝对定位

absolute 其样式表现和行为不依赖于其它 CSS 属性就可以完成。不需要设置 relative 也能完成所需效果。

absolute 与 text-align

对于块状的 absolute 元素，text-align 是不会有效果的。非块状的元素因为有“幽灵空白节点”和“无依赖绝对定位”共同作用，会受 text-align 影响但不会是完全居中的行为。

右下角“返回顶部”以及“反馈”小按钮

  1. <style>
  2.   .alignright {
  3.     height:0;
  4.     text-align:right;
  5.     overflow:hidden;
  6.   }
  7.   .alignright:before {
  8.     content:'\2002';
  9.   }
  10.   .follow {
  11.     position:fixed;
  12.     bottom:100px;
  13.     z-index:1;
  14.   }
  15. </style>
  16. <div class="alignright">
  17.   <span class="follow"></span>
  18. </div>

absolute 与 overflow

如果 overflow 不是绝对定位元素，同时绝对定位元素和 overflow 容器之间没有定位元素，则 overflow 无法对 absolute 元素进行裁剪。

以下两个都不会被裁剪

  1. <div style="overflow:hidden;">
  2.   <img src="1.jpg" style="position:absolute;">
  3. </div> 
  5. <div style="position:relative;">
  6.   <div style="overflow:hidden;">
  7.     <img src="1.jpg" style="position:absolute;">
  8.   </div>
  9. </div>

出现 transform 属性时对 overflow 裁剪绝对定位元素的数据

  • overflow 元素自身 transform
    • IE9 以上版本浏览器、Firefox 和 Safari（OS X、iOS）裁剪
    • Chome 和 Opera 不裁剪
  • overflow 子元素 transform
    • IE9 以上版本浏览器、Firefox 和 Safari（OS X、iOS）裁剪
    • Chome 和 Opera 裁剪

absolute 与 clip

clip 起作用元素必须是绝对定位或者固定定位。它的语法如下：

  1. clip:rect(top, right, bottom, left)
  2. // 或者
  3. clip:rect(top right bottom left)

这四个值不能缩写，不支持百分比值。

fixed 固定定位的裁剪

overflow 属性往往不能裁剪固定定位的属性，必须使用 clip。

  1. .fixed-clip {
  2.   position: fixed;
  3.   clip: rect(30px 200px 200px 20px);
  4. }

最佳可访问性隐藏

“可访问性隐藏”指的是内容肉眼看不到，但是设备却能进行识别和访问的隐藏。

标识文字隐藏

  1. <style>
  2.   .logo h1 {
  3.     position: absolute;
  4.     clip: rect(0 0 0 0);
  5.   }
  6. </style>
  7. <a href="/" class="logo">
  8.   <h1>CSS 世界</h1>
  9. </a>

clip 的渲染

clip 隐藏仅仅决定了那一部分是可见的，非可见无法影响点击事件。视觉上虽然隐藏，但是元素的尺寸依然是原来的尺寸。在 IE 和 Firefox 下抹掉了不可见区域尺寸对布局的影响，Chome 却保留了。

absolute 的流体特征

当 absolute 的元素有 left、top、right、bottom 属性的时候，元素才真正变成绝对定位元素。绝对定位的元素“对立方向同时发生定位”的时候才会具有流体特征。

margin:auto 居中

绝对定位元素的 margin;auto 的填充规则和普通流体元素的一模一样：

  • 如果一侧定值，一侧 auto，auto 为剩余空间大小。
  • 如果两侧均是 auto，则平分剩余空间。
  1. .element {
  2.   width: 300px;
  3.   height: 200px;
  4.   position: absolute;
  5.   left: 0;
  6.   right: 0;
  7.   top: 0;
  8.   bottom: 0;
  9.   margin: auto;
  10. }

相对定位

relative 对 absolute 的限制

relative 可以让元素依旧保持在正常的文档流中。

relative 与定位

relative 的定位有两个特征：

  • 相对自身
  • 无入侵

relative 定位的 left、top、right、bottom 的百分比是相对于包含块计算的，而不是自身。top 和 bottom 的百分比值计算和 height 的百分比值计算都是基于高度计算的。相对定位的 left、right 同时存在 right 失效，bottom、top 同时存在 bottom 失效。

最小影响原则

布局实战原则：

  • 尽量不要使用 relative，如果想定位某些元素，看看能否使用“无依赖的绝对定位”。
  • 如果场景受限，一定要使用 relative，则该 relative 务必最小化。

固定定位

不一样的“包含块”

position: fixed 的“包含块”是根元素，近似看成 HTML 元素。唯一可以限制它的只有 HTML 元素。

position:fixed 的 absolute 模拟

  1. <div class="page">固定定位元素</div>
  2. <div class="fixed"></div>
  3. <style>
  4.   html,body {
  5.     height: 100%;
  6.     overflow: hidden;
  7.   }
  8.   .page {
  9.     height: 100%;
  10.     overflow: auto;
  11.   }
  12.   .fixed {
  13.     position: absolute;
  14.   }
  15. </style>

参考

【1】CSS 世界@张鑫旭