前端学习（十四）

简单布局：

先画一个草图，确定页面中大盒的布局，再大盒中确定小盒的布局。

高度塌陷：

在文档流中，父元素的高度会默认为子元素撑开，当子元素浮动，脱离文档流后，父元素内容区高度塌陷，页面父元素以下的父元素都会上移，将会导致页面混乱。

解决方法一：写死父元素的高度，但会失去适应性，不推荐。

方法二：根据W3C的标准，在页面元素中都含有一个隐含的属性叫做Block Formatting Context 简称BFC ，默认关闭。作用：开启元素的BFC后，元素将会具有如下特性：1.父元素的垂直边距不会与子元素重叠；

2.开启BFC的元素不会被浮动的元素覆盖；

3.开启BFC的元素可以包含浮动的元素。

开启方式：

1.设置元素浮动（可以撑开父元素，但父元素的宽度丢失，下方元素依旧上移）

2.设置元素绝对定位 ；3.设置元素为inlink-block（较前者，可避免下方元素上移）；

4.将overflow设置为非visible值（推荐，但不兼容IE6）

5.hasLayout解决（适用于IE8以下）：将zoom设置为1，zoom表示放大（建议4，5一起用）