第13天：布局的兼容性与两种不常用的布局

到目前为止，主流的布局都讲完了。但是浏览器的兼容性是一个很大的问题。对于 Hybrid 应用（嵌入在 iOS 和 Android 中的 web 页）来说，可以使用多种布局方式。但是，对于古老的 IE 浏览器来说，它的兼容性非常低，有些布局方式完全不能使用。我们看看下面不同布局的兼容性：

FlexBox布局，一种响应式的布局方式，可以根据父元素的大小灵活缩放子元素。更多关于它的内容前往：第2天：图解 FlexBox 布局（上）。IE10才部分支持 FlexBox 布局，现在网站开发大多需要支持 IE8 浏览器，所有对于网站开发就放弃使用 FlexBox 布局吧。对于 iOS，目前大多支持 iOS9 及以上的系统，Android 大多支持 4.4 及以上的系统。所以在移动端开发可以使用 FlexBox 布局。很可惜，这么好用的技术却不能用。图来自：https://caniuse.com/#feat=flexbox

grid 布局 ，这种布局更灵活，更好用。它是一种二维布局，支持响应式。你应该能想到它的兼容性。更多关于它的内容前往：第8天：布局翘楚 - Grid 布局概述。iOS10.3 才开始支持这种布局，所以这种布局你也别想了。网站和移动端开发都不能用。

position布局：这种布局方式几乎所有的浏览器都支持，除 sticky 这个属性值外。更多关于 position 布局，可前往 第9天: position 布局之 fixed、sticky；

float 布局：浏览器都支持，可以放心使用。

流式布局：这是默认的布局方式，所以都支持，不需要考虑它的兼容性。

总的来说如果对于网站开发需要支持 IE10 以下浏览器，FlexBox、grid 布局不能用。其它布局方式均可使用。

剩余的2种布局

我们还剩下最后两种布局没有讲到，由于目前它们（table、multi-column）很少被用到，所以这两种布局不打算在小课中讲了。后续如果在实际工作中碰到这两种布局的使用场景，我再单独写一篇课程来讲。目前只需知道还有这两种布局以及它们的布局特点即可。table 布局类似表格，但是它不够灵活。multi-column 这是一种多列布局，可以做类似于报纸，一列一列的布局。

今天的打卡指令：

1.谈一谈你目前开发中，网站需要支持哪些浏览器以及版本号；

2.谈一谈你目前开发中，App中的H5需要支持的最低版本号；

3.直接打卡吧；

---

推荐阅读：

死磕 CSS 布局 - 前端小课第二阶段