### 什么是浮动 >[info] 普通流定位 static (默认方式) 普通流定位，又称为文档流定位，是页面元素默认的定位方式，其特点： 1、块级元素：从上到下排列 2、行内元素：从左到右排列 如何让多个块级元素在一行内显示，这不引出了浮动定位 >[info] 浮动定位 float float：left/right 脱离文档流 >[info] 相对定位 relative 元素会相对于它原来的位置偏移某个距离，改变元素位置后，元素原本的空间依然会被保留 position：relative 配合偏移属性 top/right/bottom/left 实现位置改变 >[info] 绝对定位 absolute 绝对定位具有以下特征： 1.脱离文档流，不占据页面空间 2.通过偏移属性固定元素位置 3.相对于最近的已定位的祖先元素实现位置固定 4.如果没有已定位祖先元素，那么就相对于最初包含块(body,html)去实现位置的固定 position：absolute 配合偏移属性 top/right/bottom/left 实现位置的固定 ### 浮动的效果 >[info] 浮动之后会怎么样 1.浮动定位元素会被排除在文档流之外，脱离文档流(不占据页面空间)，其余的元素要上前补位 2.浮动元素会停靠在父元素的左边或右边，或停靠在其他已浮动元素的边缘上(元素只能在当前所在行浮动)  3.浮动元素依然位于父元素之内  4.浮动元素处理的问题-解决多个块级元素在一行内显示的问题  注意  1.一行内，显示不下所有的已浮动元素时，最后一个将换行  2.元素一旦浮动起来之后，那么宽度将变成自适应(宽度由内容决定)  3.元素一旦浮动起来之后，那么就将变成块级元素,尤其对行内元素，影响最大  块级元素：允许修改尺寸  行内元素：不允许修改尺寸  4.文本，行内元素，行内块元素时采用环绕的方式来排列的，是不会被浮动元素压在底下的，会巧妙的避开浮动元素 >[info] 浮动 之后会有什么样的影响 由于浮动元素会脱离文档流，所以导致不占据页面空间，所以会对父元素高度带来一定影响。如果一个元素中包含的元素全部是浮动元素，那么该元素高度将变成0（高度塌陷） ### 如何清除浮动 >[info] 方案1 直接设置父元素的高度  优势：极其简单  弊端：必须要知道父元素高度是多少 >[info] 方案2 在父元素中，追加空子元素，并设置其clear属性为both  clear是css中专用于清除浮动的属性  作用：清除当前元素前面的元素浮动所带来的影响  取值：  1、none  默认值，不做任何清除浮动的操作  2、left  清除前面元素左浮动带来的影响  3、right  清除前面元素右浮动带来的影响  4、both  清除前面元素所有浮动带来的影响  优势：代码量少 容易掌握 简单易懂  弊端：会添加许多无意义的空标签，有违结构与表现的分离，不便于后期的维护 >[info] 方案3 设置父元素浮动  优势：简单，代码量少，没有结构和语义化问题  弊端：对后续元素会有影响 >[info] 方案4 为父元素设置overflow属性  取值：hidden 或 auto  优势：简单，代码量少  弊端：如果有内容要溢出显示(弹出菜单)，也会被一同隐藏 >[info] 方案5 父元素设置display:table  优势：不影响结构与表现的分离，语义化正确，代码量少  弊端：盒模型属性已经改变，会造成其他问题 >[info] 方案6 使用内容生成的方式清除浮动 ~~~ 1 .clearfix:after { 2 content:""; 3 display: block; 4 clear:both; 5 } ~~~ :after 选择器向选定的元素之后插入内容  `content:"";` 生成内容为空  `display: block;` 生成的元素以块级元素显示,  `clear:both;` 清除前面元素浮动带来的影响  相对于空标签闭合浮动的方法  优势：不破坏文档结构，没有副作用  弊端：代码量多 >[info] 方案7 ~~~ 1 .cf:before,.cf:after { 2 content:""; 3 display:table; 4 } 5 .cf:after { clear:both; } ~~~ 优势：不破坏文档结构，没有副作用  弊端： 代码量多