CSS学习笔记(一)-18.浮动特性

浮动特性：

1.浮动元素脱离标准流。

由于box是浮动的，所以飘起来了。而box2就占用了box原来的位置。

 1 <!--
 2  * @Author: invoker
 3  * @Github: https://github.com/invoker2021
 4  * @Date: 2021-07-13 21:16:05
 5  * @LastEditors: invoker
 6  * @LastEditTime: 2021-07-13 21:18:06
 7  * @Description: 
 8  * @FilePath: \css\浮动2.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>浮动2</title>
18     <style>
19         .box {
20             height: 200px;
21             width: 200px;
22             background-color: pink;
23             float: left;
24         }
25         
26         .box2 {
27             height: 400px;
28             width: 300px;
29             background-color: blue;
30             color: red;
31         }
32     </style>
33 </head>
34 
35 <body>
36     <div class="box">浮动的盒子</div>
37     <div class="box2">标准流的盒子</div>
38 </body>
39 
40 </html>
View Code

 

 

 

2.浮动元素会一行内显示且元素顶部对齐。

 

3.浮动元素会具有行内块元素的特性。

如图所示：box2独占一行，box3行内块元素，另起一行展示。

 

 

 1 <!--
 2  * @Author: invoker
 3  * @Github: https://github.com/invoker2021
 4  * @Date: 2021-07-13 21:16:05
 5  * @LastEditors: invoker
 6  * @LastEditTime: 2021-07-13 21:28:01
 7  * @Description: 
 8  * @FilePath: \css\浮动2.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>浮动2</title>
18     <style>
19         .box {
20             height: 200px;
21             width: 200px;
22             background-color: pink;
23             float: left;
24         }
25         
26         .box2 {
27             height: 400px;
28             width: 300px;
29             background-color: blue;
30             color: red;
31             /* float: left; */
32         }
33         
34         .box3 {
35             height: 400px;
36             width: 400px;
37             background-color: purple;
38             color: green;
39             float: left;
40         }
41     </style>
42 </head>
43 
44 <body>
45     <div class="box">浮动的盒子</div>
46     <div class="box2">标准流的盒子</div>
47     <div class="box3">浮动的盒子3</div>
48 
49 </body>
50 
51 </html>
View Code

 

1.如果块级盒子没有设置宽度，默认和父级一样宽。但是变成浮动盒子后，他的大小根据内容来决定。

 2.浮动的盒子中间没有缝隙，但是同一行多个行内块元素，则会有缝隙。

posted @ 2021-07-13 21:33  kaer_invoker  阅读(52)  评论(0)    收藏  举报