css -- 浮動 · 前端知識 -- 學習整理

>[success] # 浮動 1. 絕對定位、浮動都會讓元素**脫離標準流**，以達到靈活布局的效果 >[danger] ##### 特點 1. 朝著向左或向右方向移動，直到自己的邊界**緊貼著包含塊（一般是父元素）或者其他浮動元素的邊界為止** * 這里說明以下是對`absolute` 做了定位要不他不受限于`緊貼著包含塊（一般是父元素）` 這個限制，紅色浮動部分最大邊界是父元素邊界 ![](https://img.kancloud.cn/c5/22/c5220688f6fe535f63f980263d086181_411x295.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .outer{ width: 200px; background-color: aqua; height: 200px; } .inner{ float: right; width: 20px; height: 20px; background-color: red; } .outer :nth-child(2){ position: absolute; top: 10px; left: 200px; background-color: blue; } </style> </head> <body> <div class="outer"> <div class="inner">23</div> <div>123</div> </div> </body> </html> ~~~ 2. 如果一個元素浮動，另一個浮動元素已經在那個位置了，后浮動的元素將緊貼著前一個浮動元素（左浮找左浮，右浮找右浮） 3. 如果水平方向剩余的空間不夠顯示浮動元素，浮動元素將向下移動，直到有充足的空間為止 4. 行內級元素、inline-block元素浮動后，其頂部將與所在行的頂部對齊 ![](https://img.kancloud.cn/ed/78/ed7808696bb326c397acde34d40038f5_432x330.png) 5. 浮動元素不能與行內級內容層疊，行內級內容將會被浮動元素環繞 ![](https://img.kancloud.cn/10/62/106235a2e7ba64b674503f84864406ee_306x321.png)