盒模型、BFC、 清除浮动

（一）盒模型

  1.什么是盒模型

•    在HTML页面中，每一个元素都可以被看作一个盒子，这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成；
• 

 2.盒子模型有两种

• 标准盒模型：一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)
• 怪异盒模型：一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）（IE浏览器）

3. 标准和怪异模型的转换

box-sizing:content-box; 标准模式的盒子模型标准
box-sizing:border-box; 怪异模式的盒子模型标准
box-sizing:inherit; 从父元素继承 box-sizing 属性的值。

4.怎么获取和设置box的内容宽高
IE： dom.currentStyle.width/height

非IE: window.getComputedStyle(dom).width/height

（二）BFC

1.什么是BFC？

    BFC是块级格式化上下文，一块独立的布局环境，保护其中内部元素不收外部影响，也不影响外部。本身BFC是一种css的布局方式，只是我们可以利用它来解决外边距折叠的问题，BFC并不是专门用来解决这个问题而创的；

2.如何触发BFC？

    在box属性值为这些的情况下，都会让所属的box产生BFC。

overflow: auto/ hidden;
position: absolute/ fixed;
float: left/ right;
display: inline-block/ table-cell/ table-caption/ flex/ inline-flex

 3.BFC的应用场景

•  自适应布局------>利用BFC的这一个原理就可以实现两栏布局，(比如：左边是个小盒子，右边是个大盒子)左边定宽，右边自适应。不会相互影响，哪怕高度不相等,给right加overflow:hidden；使其变成BFC，消除外部left因浮动对他的影响
• 清除浮动
• 解决垂直边距重叠

 4.边距重叠的情况有两种：

• 父子关系的边距重叠

父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距

      给父元素添加 overflow：hidden
这样父元素就变为 BFC，不会随子元素产生外边距 

• 同级兄弟关系的重叠

同级元素在垂直方向上外边距会出现重叠情况，最后外边距的大小取两者绝对值大的那个 

 

（三） 清除浮动的4种方式

• 1.为什么要清除浮动？

  ---

  清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题

•  2.四种方式：
• 额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签 。

• 优点： 通俗易懂，书写方便。（不推荐使用）
  缺点： 添加许多无意义的标签，结构化比较差。

  给元素small清除浮动（在small后添加一个空白标签clear(类名可以随意），设置clear:both;即可）

• 父级添加overflow方法： 可以通过触发BFC的方式，实现清楚浮动效果。必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
• 优点： 简单、代码少、浏览器支持好
• 缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。不能和position配合使用，因为超出的尺寸的会被隐藏。

• 使用after伪元素清除浮动： :after方式为空元素的升级版，好处是不用单独加标签了。IE8以上和非IE浏览器才支持:after，，zoom(IE专有属性)可解决ie6,ie7浮动问题（较常用推荐）
•     优点： 符合闭合浮动思想，结构语义化正确，不容易出现怪问题
•     缺点：由于IE6-7不支持：after，使用zoom：1

• 使用before和after双伪元素清除浮动：（较常用推荐）
•    优点：代码更简洁

•    补充

• 父级div定义 height： 父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

  优点： 简单、代码少、容易掌握

  缺点： 只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题