## 文档流 网页在解析的时候，遵循于从上向下，从左向右的一个顺序，而这个顺序就是来源于标准文档流。 <br> ## 浮动 使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。 <br> ## 基础语法 ~~~ div{ /* 左浮动 */ float:left; /* 右浮动 */ float:right; /* 默认不浮动 */ float:none; } ~~~ <br> ## 浮动元素的特性 * 一行显示多个 * 支持所有css设置 * 脱离文档流，在原文档流中所占的空间会被清楚掉 * 阻止margin叠压 <br> ## 浮动产生的问题-高度塌陷 脱离文档流，在原文档流中所占的空间会被清楚掉，这样父级元素的高度就会计算错误导致塌陷，所以需要清浮动 <br> ## 清除浮动的几种方法 ~~~ <div class="nav"> <a href="javascript:;" class="on">首页</a> <a href="javascript:;">新闻资讯</a> <a href="javascript:;">关于我们</a> </div> <!- a标签都是浮动元素 --> ~~~ #### overflow:hidden 浮动元素父级添加这个超出隐藏的css属性 <br> #### 空标签清浮动 最后一个浮动元素后边加 `<div class="clear"></div>` <br> #### after伪类 清浮动方法 ~~~ /* nav这个div加上clearfix */ .clearfix:before,.clearfix:after { content: ' '; display: table;} .clearfix:after { clear: both;} ~~~ <br>