盒子模型与浮动

1. 盒子模型
   1.1标准盒子模型四要素:内容、外边距、内边距、边框。
   内容(鞋子): with宽度、height 高度
   边框(鞋子包装盒): border:宽度 风格(solid实线/dashed虚线/double双实线) 颜色
   外边距(盒子与盒子空隙): margin
   内边距(泡沫): padding
   1.2位置:外边距位于边框外面，内边框位于内容与边框之间。
   1.3显示情况:标准盒子里放padding 会撑大盒子的大小(显示宽度＝border +padding +content )，那么如果是怪异盒子(IE盒子)往里面放padding，盒子的大小不会改变，padding反而会占用盒子内容的大小，成为里面其中的一部分。IE 8版本以的盒子是怪异盒子，现今的IE和其他浏览器下的盒子都是标准的盒子box -size: border-box (属性:属性值)可以把标准盒子该变成怪异盒子。
   (注:margin 和padding、border 都属于综合属性，浏览器默认状态下有外边距、内边距，且不一样的浏览器默认的盒子内外边距不一样，因此可以使用通配符选择器进行浏览器默认样式清除)
2. 盒子模型的外边距
   有边框的盒子: 左右外边距累加，上下外边距合并且取大的那个外边距。
   没有边框的父子盒子:子盒子左右可以进行移动，但，上下是同时带动父盒子一起移动。
   结论:面对盒子合并问题，可以给盒子设置一个父盒子，然后加父盒子边框，设置边框颜色为透明(transparent)。
3. 浮动
   3.1浮动语法: float:right/left盒子直接居左或者居右
   3.2影响:不影响设置浮动的盒子前面的内容，影响被设盒子后面内容的显示。后面的内容直接忽略掉被设置的盒子，自己往前面走。
   3.3去除浮动的办法:
   1.使用伪类选择权的::after 或者::before在被设置的盒子后面或者被设置盒子紧挨着的后面标签前面加clear:left /right ，特别注意:这里一定记得设置为块级。
   2.直接在被设置盒子后面加在加一个盒子，然后设置样式clear:left/right 。