7-3 架构与版型 -- 浮动背景，固定内容

1.当我第一次看到这个小节的标题时，我不是很理解什么是浮动背景，更不用说固定内容了。幸好作者给出了几个网站，我好像明白了！（如果不正确，请指出）
大家可以先看看这些网站的效果，再来阅读下文

https://zh.airbnb.com/

https://www.cn.kayak.com/?ispredir=true

http://www.conosur.ie/

大家可以尝试改变浏览器窗口宽度(滚轮缩放一下)，大概就能看到效果了。
用W3School的页面对比一下，可以更明显的感觉到（W3School的背景并不是浮动的）

2.这个效果我们常用于页尾，也建议用于页尾

小练习

html

css

footer{  
  background: #333; 
  padding: 1em calc(50% - 450px);
}

.wrapper{   
  background: #ccc;
  height: 200px;
}

我们并没有设置内容wrapper宽度，而是以padding形式来设置的
这里的宽度为 450*2 = 900px