CSS学习笔记(一)-19.浮动元素的常见使用:和标准流的父级搭配使用
网页布局一般原则:
1.先用标准流的父级元素排列上下位置,然后内部子元素在采用浮动排列左右位置。
浮动布局1:
参照:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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 <!DOCTYPE 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:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
.last右边外距没有。否则第四个盒子会掉下来。
2.先设置盒子的大小,在设置盒子的位置。
参照:
demo:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-13 22:13:33 5 * @LastEditors: invoker 6 * @LastEditTime: 2021-07-13 22:32:00 7 * @Description: 8 * @FilePath: \css\浮动布局5.html 9 --> 10 <!DOCTYPE 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>Document</title> 18 <style> 19 .box { 20 width: 1225px; 21 height: 614px; 22 background-color: pink; 23 margin: 0 auto; 24 } 25 26 .left { 27 width: 234px; 28 height: 614px; 29 background-color: pink; 30 float: left; 31 } 32 33 .right { 34 width: 991px; 35 height: 614px; 36 background-color: blue; 37 float: left; 38 } 39 40 .right>div { 41 float: left; 42 width: 234px; 43 height: 300px; 44 background-color: #fff; 45 margin-left: 13px; 46 margin-top: 6px; 47 } 48 </style> 49 </head> 50 51 <body> 52 <div class="box"> 53 <div class="left">左青龙</div> 54 <div class="right"> 55 <div>1</div> 56 <div>2</div> 57 <div>3</div> 58 <div>4</div> 59 <div>5</div> 60 <div>6</div> 61 <div>7</div> 62 <div>8</div> 63 </div> 64 </div> 65 </body> 66 67 </html>
本文来自博客园,作者:kaer_invoker,转载请注明原文链接:https://www.cnblogs.com/invoker2021/p/15008680.html