浮動

時間 2019-11-22

標籤浮動简体版

原文原文鏈接

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        /*
        塊元素在文檔流中默認垂直排列，因此這個三個div自上至下依次排開，因此想要一行排開的話，解決方案有：
        一、行內塊元素，至關於文字，中間會有空格，能夠把div緊密緊挨。用display：inline-block
        二、若是但願元素在頁面中水平排列，能夠使塊元素脫離文檔流
        使用float來使元素浮動，從而脫離文檔流
        可選值：
        none，默認值，元素默認在文檔流中排列。
        left，元素會當即脫離文檔流，向頁面的左側浮動。
        right，元素會當即脫離文檔流，向頁面的右側浮動。
        
        當一個元素設置浮動之後（float屬性是一個非none值）
        元素會當即脫離文檔流，元素脫離文檔流之後，它下邊的元素會當即向上移動
        元素浮動之後，會盡可能向頁面的左上或右上浮動，直到遇到父元素的邊框或者其餘元素。
        若是浮動元素上邊是一個沒有浮動的塊元素，則浮動元素不會超過塊元素。
        浮動的元素不會超過他上邊的兄弟元素，最多最多一邊齊。
        */
        
        .box1{
            width: 200px;
            height: 200px;
            background: red;
        }
        .box2{
            width: 200px;
            height: 200px;
            background: skyblue;
        }
        .box3{
            width: 200px;
            height: 200px;
            background: blue;
        }
        
    </style>
    </head>
    <body>
        <div class="box1">
            
        </div>
        <div class="box2">
            
        </div>
        <div class="box3">
            
        </div>
        
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        
        .box1{
            width: 100px;
            height: 100px;
            background: pink;
            /*box1向左浮動
            浮動的元素不會蓋住文字，文字會自動環繞在浮動元素的周圍。
            因此咱們能夠經過設置浮動。
            因此咱們能夠經過浮動來設置文字環繞圖片的效果。
            */

　　　　　　　　/*
　　　　　　　　在文檔流中，子元素的寬度默認佔父元素的所有
　　　　　　　　當元素設置浮動之後，會徹底脫離文檔流，
　　　　　　　　塊元素脫離文檔流之後，高度和寬度都被內容撐開。
　　　　　　　　內聯元素脫離文檔流之後會變成塊元素
　　　　　　　　*/css

            float: left;
        }
        .p1{
            height: 200px;
            background: deeppink;
        }
        
        
    </style>
    </head>
    <body>
        <div class="box1">
            
        </div>
        <p class="p1"></p>
    </body>
</html>

相關標籤/搜索

每日一句

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