[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> ```