浮動

時間 2019-11-22

標籤浮動简体版

原文原文鏈接

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script type="text/javascript">
 7             
 8         </script>
 9         
10     <style type="text/css">
11     /*
12     塊元素在文檔流中默認垂直排列
13     若是但願塊元素水平排列，能夠使塊元素脫離文檔流
14     使用float使元素浮動，從而脫離文檔流
15     可選值
16     none 默認值，元素默認在文檔流中排列
17     left 元素會當即脫離文檔流，向頁面的左側浮動
18     right 元素會當即脫離文檔流，向頁面的右側浮動
19     當一個元素設置浮動非none後
20     元素會當即脫離文檔流，而下邊的元素會當即向上移動
21     元素浮動之後會盡可能向左上或右上移動，直到遇到父元素的邊框或者其餘的浮動元素
22     若是浮動元素上邊是一個沒有浮動的塊元素，則浮動元素不會超過塊元素
23     浮動的元素不會超過上邊的兄弟元素，最多一邊齊
24     */
25    .box1{
26        width: 100px;
27        height: 100px;
28        background-color: red;
29        float: left;
30    }
31    .box2{
32           width: 100px;
33           height: 100px;
34           background-color: yellow;
35        float: left;
36    }
37    .box3{
38           width: 100px;
39           height: 100px;
40           background-color:green;
41        float: right;
42    }
43     </style>
44        
45     </head>
46     <body>
47     <div class="box1"></div>
48     <div class="box2"></div>
49     <div class="box3"></div>
50     </body>
51 </html>

浮動特色
1.浮動的元素不會蓋住文字，文字會自動環繞在浮動元素的周圍，因此能夠經過浮動來設置文字環繞圖片的效果。javascript

2.css

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script type="text/javascript">
 7             
 8         </script>
 9         
10     <style type="text/css">
11     
12    .box1{
13       
14        height: 100px;
15        background-color: skyblue;
16        
17        /*
18        在文檔流中，子元素的寬度默認佔父元素的所有 若是加上float語句則不會輸出，由於不在文檔流中 塊元素高度和寬度隨內容撐開，無內容則無寬高
19        當元素設置浮動之後，會徹底脫離文檔流
20        塊元素脫離文檔流後，高度和寬度都被內容撐開
21        */
22       
23    }
24    .s1{
25        /*
26        開啓span的浮動
27        內聯元素脫離文檔流後會變成塊元素
28        脫離文檔流後再也不區份內聯和塊，所有都是塊
29        */
30       float: left;
31       width: 100px;
32       height:100px;
33       background-color: aqua;
34    }
35     </style>
36        
37     </head>
38     <body>
39     <div class="box1"></div>
40     <span class="s1"></span>
41     </body>
42 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。