CSS學習筆記(一)-19.浮動元素的常見使用：和標準流的父級搭配使用
阿新 • • 發佈：2021-07-13
網頁佈局一般原則：先用標準流的父級元素排列上下位置，然後內部子元素在採用浮動排列左右位置。
浮動佈局1：
1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-13 21:45:53 5 * @LastEditors: invoker 6 * @LastEditTime: 2021-07-13 21:50:58 7 * @Description: 8 * @FilePath: \css\浮動3.html 9 --> 10 <!View CodeDOCTYPE html> 11 <html lang="en"> 12 13 <head> 14 <meta charset="UTF-8"> 15 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 16 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 17 <title>浮動3</title> 18 <style> 19 .box1 { 20 height: 480px; 21 width: 1200px; 22 margin: 0 auto; 23 background-color: pink; 24 } 25 26 .left { 27 width: 230px; 28 height: 480px; 29 background-color: purple; 30 float: left; 31 } 32 33 .right { 34 width: 970px; 35 height: 480px; 36 background-color: blue; 37 float: left; 38 } 39 </style> 40 </head> 41 42 <body> 43 <div class="box1"> 44 <div class="left">左側</div> 45 <div class="right">右側</div> 46 </div> 47 48 </body> 49 50 </html>
浮動佈局2：
案例：
佈局demo:
1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-13 21:56:01 5 * @LastEditors: invoker 6 * @LastEditTime: 2021-07-13 22:00:12 7 * @Description: 8 * @FilePath: \css\浮動4.html 9 --> 10 11 <!DOCTYPE html> 12 <html lang="en"> 13 14 <head> 15 <meta charset="UTF-8"> 16 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 17 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 18 <title>浮動4</title> 19 <style> 20 * { 21 margin: 0; 22 padding: 0; 23 } 24 25 li { 26 list-style: none; 27 } 28 29 .box { 30 height: 285px; 31 width: 1226px; 32 } 33 34 .box li { 35 width: 296px; 36 height: 285px; 37 float: left; 38 margin-right: 14px; 39 background-color: purple; 40 } 41 42 .box .last { 43 margin-right: 0; 44 } 45 </style> 46 </head> 47 48 <body> 49 <ul class='box'> 50 <li>1</li> 51 <li>2</li> 52 <li>3</li> 53 <li class='last'>4</li> 54 </ul> 55 </body> 56 57 </html>View Code
.last右邊外距沒有。否則第四個盒子會掉下來。
本文來自部落格園，作者：kaer_invoker，轉載請註明原文連結：https://www.cnblogs.com/invoker2021/p/15008680.html