[TOC] # 浮动 ``` float: left;right； ``` ## 案例1：脱离文档流  ## 案例2：制作导航栏  ## 选修 ### 1. 浮动元素的排列位置 > 与上一个块级元素有关 > 1. 如果上一元素浮动，则顶部对齐 > 2. 如果上一元素正常(块级)，则底部对齐   ### 2：清除浮动   # 定位 ``` position: static; /*默认原位置，无特殊效果*/ position: relative; /*不脱离文档流，默认原始位置，相对于原位置*/ position: absolute; /*脱离文档流，默认原始位置，相对于有特殊定位的父元素*/ position: fixed; /*脱离文档流，默认原始位置，相对于窗口*/ ``` ## 案例3：定位的四种方式  # display > 1. 块级元素/行内元素/行内块元素 > 2. 显示和隐藏 > 3. 可见与不可见visibility ``` visibility: hidden; visible; ``` ## 案例4：制作菜单  # 扩展：不可见文字 ``` <style type="text/css"> div:first-child{ display: none; } div:nth-child(2){ visibility: hidden; } div:nth-child(3){ color: rgba(0,0,0,0); } div:nth-child(4){ opacity: 0; } </style> ```