css浮动布局自适应,CSS 几种常用自适应布局

通过阅读和实践，我对几种常用的布局样式有了一定的了解，也稍微总结了一下原理，若有不对请大家纠错。谢谢

我理解的【两列布局】左边固定和右边自适应，或者右边固定左边自适应的原理是：

1.设置固定区域的宽度

2.设置自适应的区域的宽度为100%

3.设置他们向左或者向右浮动。

4.固定区域设置它的 外边距为负数 使 自适应区域能够和固定区域同在一行。

5.虽然自适应区域与固定区域同一行 但是它宽度其实是父级的宽度，所有自适应区域需要设置一个子区域，并且也需要让子区域中的内容能够正确显示在可视范围内。

【三列布局】 两边固定 中间自适应

1.我们可以把中间和右边看成一个 右边固定，左边自适应的布局。

2.设置左边区域的宽度和浮动

3.因为左边的区域就应该是文档流中的区域，但是我们设置了浮动，导致左边区域已经脱离了文档流，所有我们应该使用 position:relative 使左边区域还依旧显示在文档流的位置中。

4.给自适应区加一个子区域，并设置子区域的显示区域。