html中的盒模型,BFC,以及清除浮动

---

前言

---

一、盒模型

1.什么是盒模型?

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

2.盒模型有几种?

通常有两种 :标准盒模型和怪异盒模型
标准盒模型的宽度:width + margin(左右) + padding(左右) + border(左右)
怪异盒模型的宽度:width + margin(左右) 它的宽度已经包含了padding和border值

2.标准盒模型和怪异盒模型之间转化的方式?

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

怎么获取和设置box的内容宽高

IE ：dom.currentStyle.width/height
非IE：window.getComputedStyle(dom).width/height

二、CSS布局中BFC的问题

1.通常会出现边距重叠的问题

两个box如果都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。
边距重叠分为两种:
1.父子关系的边距重叠

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

解决方式:给父元素添加 overflow：hidden
这样父元素就变为 BFC，不会随子元素产生外边距
2. 同级兄弟关系的重叠

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

解决方式:可通过添加空元素或伪类元素，设置overflow:hidden;解决margin重叠问题

2.什么是BFC?

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

3.如何触发BFC?

1.overflow: auto/ hidden; 清除浮动
2.position: absolute/ fixed; 绝对定位和固定定位
3.float: left/ right; 浮动
4.display: inline-block/ table-cell/ table-caption/ flex/ inline-flex 转化为块级元素

4.BFC的原理?（理解）

BFC内部的盒子，会在垂直方向，一个接一个地放置。垂直方向上也会发生边距重叠。
BFC就是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素，外边的也不会影响里边的。
BFC的区域不会与float重叠。
计算BFC的高度时，浮动元素也被计算在内。

4.BFC的应用?

1.自适应布局(左边定宽右边自适应)
2.清除浮动
3.解决垂直边距重叠

三、清除浮动

1.为什么要清除浮动?

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

例如:给父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子。

2.清除浮动的方法?

1. 额外标签法 ( 给谁清除浮动，就在其后额外添加一个空白标签) 记住clear:both
   优点： 通俗易懂，书写方便。（不推荐使用）
   缺点： 添加许多无意义的标签，结构化比较差。
2. 父级添加overflow方法(可以通过触发BFC的方式，实现清楚浮动效果)
   优点： 简单、代码少、浏览器支持好
   缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。不能和position配合使用，因为超出的尺寸的会被隐藏。
3. 使用after伪元素清除浮动 （较常用推荐）
4. 使用before和after双伪元素清除浮动：（较常用推荐）
   优点： 代码更简洁
5. 父级div手动定义height 就解决了父级div无法自动获取到高度的问题。（不常用）
   优点： 简单、代码少、容易掌握
   缺点： 只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题