本章节是前端开发者面试问题 - CSS 部分的参考答案。 欢迎提出 PR 进行建议和指正！

有哪些清除浮动的技术，都适用哪些情况？​

• 空div方法：<div style="clear:both;"></div>。
• Clearfix 方法：上文使用.clearfix类已经提到。
• overflow: auto或overflow: hidden方法：上文已经提到。
• 在大型项目中，我会使用 Clearfix 方法，在需要的地方使用.clearfix。
  设置overflow: hidden的方法可能使其子元素显示不完整，当子元素的高度大于父元素时。

如何解决不同浏览器的样式兼容性问题？​

• 在确定问题原因和有问题的浏览器后，使用单独的样式表，仅供出现问题的浏览器加载。这种方法需要使用服务器端渲染。
• 使用已经处理好此类问题的库，比如 Bootstrap。
• 使用 autoprefixer 自动生成 CSS 属性前缀。
  使用 Reset CSS 或 Normalize.css。

有什么不同的方式可以隐藏内容（使其仅适用于屏幕阅读器）？​

• width: 0; height: 0：使元素不占用屏幕上的任何空间，导致不显示它。
• position: absolute; left: -99999px： 将它置于屏幕之外。
• text-indent: -9999px：这只适用于block元素中的文本。
• Metadata： 例如通过使用 Schema.org，RDF 和 JSON-LD。
• WAI-ARIA：如何增加网页可访问性的 W3C 技术规范。
  即使 WAI-ARIA 是理想的解决方案，我也会采用绝对定位方法，因为它具有最少的注意事项，适用于大多数元素，而且使用起来非常简单。

什么情况下，用translate()而不用绝对定位？什么时候，情况相反。​

• translate()是transform的一个值。改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。而改变绝对定位会触发重新布局，进而触发重绘和复合。
• transform使浏览器为元素创建一个 GPU 图层，但改变绝对定位会使用到 CPU。 因此translate()更高效，可以缩短平滑动画的绘制时间。

当使用translate()时，元素仍然占据其原始空间（有点像position：relative），这与改变绝对定位不同。