浮動

時間  2021-08-14
標籤 html ide htm 文檔 class meta float 移動 欄目 HTML 简体版
原文   原文鏈接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    
        .box1{
            width: 400px;
            height: 200px;
            background-color: #bfa;
            
/*            
            使用float來設置元素的浮動，
                浮動能夠使元素向左或向右移動
            可選值：  
                none 默認值，不浮動
                left 向左浮動
                right 向右浮動
            
                浮動的特色:
                    1.設置浮動之後，元素會向頁面的左側或右側移動
                    2.設置浮動之後，元素會徹底脫離文檔流，不在佔據文檔流中的位置，因此它下邊的元素會自動上移
                    3.浮動元素不會超過其上沒有浮動的塊元素
                    4.浮動元素的默認位置不會超過其上的其餘的浮動元素，最多一邊齊
            
                元素脫離文檔流之後的特色：
                    1.默認寬度被內容撐開
                    2.默認高度被內容撐開
                    3.塊元素不會獨佔一行。
                    4.元素不會在文檔流中再佔據位置。   
                行內元素浮動之後也會脫離文檔流，
                    脫離文檔流之後行內元素自動變成塊元素，特色和塊元素同樣
                
            */
/*            float: right;*/
            float: left;
        }
        
        .box2{
            width: 400px;
            height: 200px;
            background-color: yellow;
            float: left;
                
                
        }
        
        .box3{
            width: 200px;
            height: 200px;
            background-color: orange;
            float: right;
                
        }
        
        a{
            width: 200px;
            height: 200px;
            background-color: yellow;
            float: left;
        }
    </style>
</head>
<body>
  
<!--  <a href="#">我是一個超連接</a>-->
   
   <div class="box1"></div>

   <div class="box2"></div>
   
   <div class="box3"></div>

</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程