浮动会对元素的显示产生的影响

浮动元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示； 浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐，但是边框和背景却忽略浮动元素而向上 一个任意非浮动元素靠齐；浮动元素后面的内联元素会向此浮动元素的外边距靠齐。

1. 什么是标准文档流

标准文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。 并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

2. 标准流的微观现象：

1. 空白折叠现象。
2. 高矮不齐，底边对齐
3. 自动换行，一行写不完时，换行写

3. 标准文档流等级

1. 分为两种等级：块级元素和行内元素；
2. 块级元素：
3. (1)霸占一行，不能与其他任何元素并列
4. (2)能接受宽、高
5. (3)如果不设置宽度，那么宽度将默认变为父亲的100%，即和父亲一样宽
6. 行内元素：
7. (1)与其他元素并排
8. (2)不能设置宽、高。默认的宽度就是文字的宽度
9. 在HTML中，标签分为：文本级和容器级；
10. 文本级：p、span、a、b、i、u、em
11. 容器级：div、h系列、li、dt、dd

浮动会对元素的显示产生的影响

1.对其父元素的影响：对于其父元素来说，元素浮动之后，它脱离当前正常的文档流，所以它也无法撑开其父元素， 造成父元素的塌陷；

2.对其兄弟元素（非浮动）的影响：如果兄弟元素为块级元素，该元素会忽视浮动元素的而占据它的位置，并且元素 会处在浮动元素的下层（并且无法通过z-index属性改变他们的层叠位置），但它的内部文字和其他行内元素都会环绕 浮动元素；如果兄弟元素为内联元素，则元素会环绕浮动元素排列；

浮动会对元素的显示产生的影响

3.对其兄弟元素（浮动）的影响：同一个方向的浮动元素：当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时， 它会紧跟在它们后面；反方向的浮动元素,互不影响，位于同一条水平线上，当空间不够时会被挤下；

4.对子元素的影响：当一个元素浮动时，在没有清除浮动的情况下，它无法撑开其父元素，但它可以让自己的浮动子元 素撑开它自身，并且在没有定义具体宽度情况下，使自身的宽度从100%变为自适应（浮动元素display:block）。其高 度和宽度均为浮动元素高度和非浮动元素高度之间的最大值。