CSS学习笔记(一)-19.浮动元素的常见使用：和标准流的父级搭配使用

网页布局一般原则：

1.先用标准流的父级元素排列上下位置，然后内部子元素在采用浮动排列左右位置。

 

 

 浮动布局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 <!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>
View Code

 

 浮动布局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右边外距没有。否则第四个盒子会掉下来。

 

2.先设置盒子的大小，在设置盒子的位置。

参照：

 

 demo:

 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>
View Code

 

 

posted @ 2021-07-13 22:01  kaer_invoker  阅读(70)  评论(0)  编辑  收藏  举报