范仁义css3课程---23、浮动小实例

一、总结

一句话总结：

使用浮动可以很方便的做出两栏或者多栏布局，我们需要注意解决浮动造成的高度塌陷问题

二、浮动小实例（div布局实例）

博客对应课程的视频位置：23、浮动小实例
https://www.fanrenyi.com/video/10/61

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>div布局示例</title>
 6     <style type="text/css">
 7         *{margin: 0;}
 8         body{height: 508px;}
 9         #header{width: 100%;height: 10%;background-color:coral;}
10         #section{width: 80%;height: 80%;background-color: aquamarine;float: left;}
11         #aside{width: 20%;height: 80%;float: left;background-color: darkseagreen;}
12         #footer{width: 100%;height: 10%;float: left;background-color: burlywood;}
13         #nav{width: 100%;height: 50%;background-color: darkkhaki;}
14     </style>
15 </head>
16 <body style="margin: 0;height: 508px">
17 <div id="header">div id="header"
18     <div id="nav">div id="nav"</div>
19 </div>
20 <div id="section">div id="section"</div>
21 <div id="aside">div id="aside"</div>
22 <div id="footer">div id="footer"</div>
23 
24 </body>
25 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>23、浮动小实例</title>
 6     <style>
 7         .header{
 8             width: 1000px;
 9             height: 100px;
10             background-color: lightgoldenrodyellow;
11             margin: 0 auto;
12         }
13         .main_content{
14             width: 1000px;
15             height: 400px;
16             background-color: lightgray;
17             margin: 10px auto;
18         }
19         .left_content{
20             width: 750px;
21             height: 400px;
22             background-color: orange;
23             float: left;
24             margin-right: 10px;
25         }
26         .right_content{
27             width: 240px;
28             height: 400px;
29             background-color: red;
30             float: left;
31         }
32         .footer{
33             width: 1000px;
34             height: 150px;
35             background-color: lightcyan;
36             margin: 0 auto;
37         }
38         .part1{
39             width: 250px;
40             height: 400px;
41             background-color: blue;
42             float: left;
43         }
44         .part2{
45             width: 250px;
46             height: 400px;
47             background-color: blueviolet;
48             float: left;
49         }
50         .part2{
51             width: 250px;
52             height: 400px;
53             background-color: yellowgreen;
54             float: left;
55         }
56     </style>
57 </head>
58 <body>
59 <div class="header">头部</div>
60 <div class="main_content">
61     <div class="left_content">
62         <div class="part1"></div>
63         <div class="part2"></div>
64         <div class="part3"></div>
65     </div>
66     <div class="right_content">right_content</div>
67 </div>
68 <div class="footer">
69 尾部
70 </div>
71 </body>
72 </html>

三、课程代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>23、浮动小实例</title>
 6     <style>
 7         .header{
 8             width: 1000px;
 9             height: 100px;
10             background-color: lightpink;
11             margin: 0 auto;
12         }
13         .main_content{
14             width: 1000px;
15             height: 400px;
16             background-color: white;
17             margin: 20px auto;
18         }
19         .footer{
20             width: 1000px;
21             height: 120px;
22             background-color: lightgoldenrodyellow;
23             margin: 0 auto;
24         }
25         .left_content{
26             width: 750px;
27             height: 400px;
28             background-color: orange;
29             float: left;
30             margin-right: 20px;
31         }
32         .sidebar{
33             width: 230px;
34             height: 400px;
35             background-color: red;
36             float: right;
37         }
38         .part1{
39             width: 250px;
40             height: 400px;
41             float: left;
42             background-color: #ff4f81;
43         }
44         .part2{
45             width: 250px;
46             height: 400px;
47             float: left;
48             background-color: #bbffcc;
49         }
50         .part3{
51             width: 250px;
52             height: 400px;
53             float: left;
54             background-color: blue;
55         }
56     </style>
57 </head>
58 <body>
59     <div class="header">头部</div>
60     <div class="main_content">
61         <div class="left_content">
62             <div class="part1"></div>
63             <div class="part2"></div>
64             <div class="part3"></div>
65         </div>
66         <div class="sidebar"></div>
67     </div>
68     <div class="footer">尾部</div>
69 </body>
70 </html>