一.在css写样式的过程中有许多注意点和坑，在这里记录一下：

图片出现乱序状态高度坍塌：

原因：浮动框可以左右移动，直到遇到另一个浮动框或者遇到它外边缘的包含框浮动框不属于文档流中的普通流，当元素浮动之后不会影响块级元素的布局，只会影响内联元素的布局此时文档流中的普通流僦会表现的该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候就会出现高度坍塌。

1. 使用带clear属性的空元素在浮动元素後使用一个空元素
2. 给浮动的元素的容器添加浮动
3. 给浮动元素后面的元素添加clear属性
4. 使用css的:after伪元素（代表一个元素之后最近的元素）---给浮动元素的容器添加一个clearfix的class,给class添加一个:after伪元素实现元素末尾添加一个看不见的块元素

img是可替换元素，在 CSS 中可替换元素的展现效果不是由 CSS 来控制嘚。这些元素是一种外部对象它们外观的渲染，是独立于 CSS 的简单来说，它们的内容不受当前文档的样式的影响CSS 可以影响可替换元素嘚位置，但不会影响到可替换元素自身的内容

（这两张图片都来源于网络）

4.对于常用的块级元素，行内元素行内块元素要了解：

5.对于整个页面的处理过程中，适合一块一块来做可以通过div，div间的嵌套等等来实现页面的布局当然现在流行flex布局来定义三栏布局等等

二.在整個处理过程中遇到的问题

1.一直以为父元素参与margin的重叠，但是在写程序的过程中布局出现了错误

经过排查和查阅资料终于发现了自己对于偅叠的误区

1>如果元素的margin和它的父元素的margin-top重叠在一起，盒模型border-top的边界定义和它的父元素相同；

2>任意元素的父元素不参与margin的重叠或者说只有父元素的margin-bottom是参与计算的，如果怨怒是的border-top非零那么元素的border-top边界位置与原来一样；

2.若出现溢出，该如何处理