- 盒子模型
- 浮动float
一、盒子模型
（1）content内容区
width和height是框内容显示的区域——包括框内的文本内容，以及表示嵌套子元素的其他框，也可以使用min-width、max-width、min-height、max-height来设置最低/最高限度的width和height。默认情况下，width和height只包括内容区域的宽和高，不包括border、padding、margin。使用box-sizing可以使其包含content、padding、border
box-sizing的值:
/* 默认值，标准盒子模型，只含内容区 */ box-sizing:content-box; /* width 和 height 属性包括内容，内边距和边框，但不包括外边距 */ box-sizing:border-box;
如果内容区过大，将会溢出，此时可使用overflow
overflow的值:
/* 默认值。内容不会被修剪，会呈现在元素框之外 */ overflow: visible; /* 内容会被修剪，并且其余内容不可见 */ overflow: hidden; /* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */ overflow: scroll; /* 由浏览器定夺，如果内容被修剪，就会显示滚动条 */ overflow: auto;
（2）margin外边框
外边距塌陷: 块级元素的上外边距和下外边距有时会合并（或折叠）为一个外边距，其大小取其中的最大者
- 相邻兄弟元素margin合并
- 父级和第一个/最后一个子元素
- 空块级元素的margin合并
（3）border边框
（4）padding内边框
（5）框类型
| 值 | 说明 |
|---|---|
| block | 块框（ block box）是定义为堆放在其他框上的框（例如：其内容会独占一行），而且可以设置它的宽高，之前所有对于框模型的应用适用于块框 （ block box） |
| inline | 行内框（ inline box）与块框是相反的，它随着文档的文字（例如：它将会和周围的文字和其他行内元素出现在同一行，而且它的内容会像一段中的文字一样随着文字部分的流动而打乱），对行内盒设置宽高无效，设置padding, margin 和 border都会更新周围文字的位置，但是对于周围的的块框（ block box）不会有影响。 |
| inline-block | 行内块状框（inline-block box） 像是上述两种的集合：它不会重新另起一行但会像行内框（ inline box）一样随着周围文字而流动，而且他能够设置宽高，并且像块框一样保持了其块特性的完整性，它不会在段落行中断开。 |
| table | 像处理table布局那样处理非table元素，而不是滥用HTML的<table>;标签来达到同样的目的。 |
| flex | 处理一些困扰CSS已久的一些传统布局问题，例如布置一系列弹性等宽容器或者垂直居中内容。 |
| grid | 给出一种简单实现CSS网格系统的方式，而在传统上它依赖于一些棘手难以处理的CSS网格框架 |
二、浮动(float)
（1）多列浮动布局
- 两列布局
- 三列布局
（2）清除浮动
clear 属性。当你把这个应用到一个元素上时，它主要意味着"此处停止浮动"——这个元素和源码中后面的元素将不浮动，除非您稍后将一个新的float声明应用到此后的另一个元素。
clear 可以取三个值：
left：停止任何活动的左浮动right：停止任何活动的右浮动both：停止任何活动的左右浮动