浮動及浮動相關問題(初次)

fsmStudy 發布于2019-08-30 15:54 / 2683人閱讀

摘要：浮動定義使元素脫離文檔流，按照指定的方向發生移動，遇到父級的邊界或者相鄰的浮動元素就會停下來，當浮動并不是全動脫離文檔流。

這僅是我個人看到的，如果補充，還請大家不要吝嗇當個鍵盤俠，謝謝！

文檔流

文檔中可顯示的元素在排列時候的開始位置以及他們所占的區域。

因為頁面中的元素分為不同的種類，所以他們會按各自的特點去顯示，在頁面中所占的區域不是一樣的。會按從上到下，從左到右的順序輸出內容。

浮動 float

定義

使元素脫離文檔流，按照指定的方向發生移動，遇到父級的邊界或者相鄰的浮動元素就會停下來，當浮動并不是全動脫離文檔流。
值            left、right、none
特征
    1、塊元素可以在一行顯示
    2、按照一個指定的方向移動，遇到父級的邊界或者相鄰的浮動元素就會停下來
    3、行內元素支持寬高
    4、脫離文檔流
    5、塊元素默認寬度會改變(包裹性)
    6、父級高度塌陷(破壞性)
          子元素浮動后，父元素高度不會自動撐開。
    7、換行不會被解析成空格
     浮動后的元素就會脫離文檔流了，那它就不屬于文檔流里的結構了，所以換行、空格都跟父級沒關系了

特征4、脫離文檔實例：

html部分

divdemo1
divdemo02
hello

css部分

div{
    float:left;
    width:100px;
    height:100px;
    background:yellowgreen;
}
span{
    float:right;
    width:100px;
    height:100px;
    border:1px solid #333;
}

特征5、塊級元素默認高度會改變

    
    hello world
/*css代碼部分*/
    .div{
        height:50px;
        floalt:left;
        border:1px solid #333;
    }

特征6、父元素高度塌陷實例



    do you relaize something?

/*css代碼*/
.parent{
    /*float:left;*/
    border:1px solid #333;
}
.children{
    width:100px;
    height:100px;
    float:left;
    border:1px solid #f00;
    background: #ccc
}

7、換行不會被解析成空格


    box
    box
    box

/*css代碼*/
.parent{
    border: 1px solid #f00;
}
.box{
    width: 100px;
    height: 200px;
    background: green;
    color: #fff;
    float: left;
}

脫離文檔流

脫離文檔流指的是元素不在頁面中占位置，定位是完全脫離文檔流

實例：
html代碼


指的是元素不在頁面中占位置了，但是文檔卻還占著位置。。指的是元素不在頁面中占位置了，但是文檔卻還占著位置。。。元素不在頁面中占位置了，但指的是元素不在頁面中占位置了，但是文檔卻還占著位置。。。是文檔卻還占著位置。。。的是元素不在頁面中占位置了，但是文檔卻還占著位置。。。指的是元素不在頁面中占位置了，但是文檔卻還占著位置。。。指的是元素不在頁面中占位置了，但是文檔卻還占著位置。。。指的是元素不在頁面中占位置了，但是文檔卻還占著位置。。。指的是元素不在頁面中占位置了，但是文檔卻還占著位置。。。指的是元素不在頁面中占位置了，但是文檔卻還占著位置。。。

css代碼

.div1{
    width: 100px;
    height: 50px;
    background: green;
    color: #fff;
    border: 5px solid blue;
    float: left;
    /*margin: 20px;
    padding: 20px;*/
}
span{
    width:100px;
    height:50px;
}

float與inline-block的區別

對于這一個區別，除了前面脫離文檔流和父元素高度塌陷的差異，還有一個區別是：
如果一排元素高度不一至的情況下，想讓他們按順序排列就可以選擇inline-block

實例：


    
        1
        2
        3
        4
        5
        6
    
/*css代碼*/
    ul{
        width: 300px;
        font-size: 0;
    }
    li{
        list-style: none;
        width: 100px;
        height: 150px;
        background: green;
        font-size: 40px;
        text-align: center;
        line-height: 150px;
        color: #fff;
        /*float: left;*/
        /*float: right;*/
        display: inline-block;
    }

清除浮動的若干方法：

清除浮動的方法

1、clear
2、給父級添加高度
    有的時候是不能給父級添加高度的，所以這個方法就用不了（父級沒有高度的情況下）
3、inline-block
    具胡與上一個的清除浮動一樣的總是，同時加了以后這個元素就沒有辦法居中了
4、overflow:hidden;
    如果子級有定位的話，并且這個定位超出了父級的范圍，那樣的話就看不到了，所以不能加這個命令
5、空標簽
    空標簽是沒有內容，但是它的作用是用來清除浮動的，所以不符合行為、樣式、結構相分離的標準
    ie6下標簽是有一個最小高度19px，解決后也會有2像素的偏差
6、br清除浮動
    與上面的問題是一樣
7、after偽類清除浮動
    after    代表選擇到的元素的內容的最后面
            after偽類的內容默認是一個行內元素
    content        設置的內容

代碼示例：



    
    
    


/*css代碼*/
.parent{
    border: 1px solid #f00;
    /*height: 100px;*/
    /*display: inline-block;
    margin: 0 auto;*/
    /*overflow: hidden;*/
}
.clearfix:after{
    content:" ";
    display:block;
    clear:both;
}
.box{
    width: 100px;
    height: 100px;
    background: green;
    float: left;
}

GPU云服務器云服務器 html5浮動問題 html浮動向上浮動上下浮動左右浮動

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116889.html

浮動及浮動相關問題(初次)

摘要：浮動定義使元素脫離文檔流，按照指定的方向發生移動，遇到父級的邊界或者相鄰的浮動元素就會停下來，當浮動并不是全動脫離文檔流。這僅是我個人看到的，如果補充，還請大家不要吝嗇當個鍵盤俠，謝謝！文檔流文檔中可顯示的元素在排列時候的開始位置以及他們所占的區域。因為頁面中的元素分為不同的種類，所以他們會按各自的特點去顯示，在頁面中所占的區域不是一樣的。會按從上到下，從左到右的順序輸出內容。...

W_BinaryTree 2019-08-02 10:54 評論0 收藏0
CSS入門指南-4：頁面布局

摘要：屬性是中最重要的用于控制布局的屬性。布局的高度多數情況下，布局中結構化元素乃至任何元素的高度是不必設定的。更新效果如圖以上措施使布局有了明顯改觀。這是《CSS設計指南》的讀書筆記，用于加深學習效果。 display 屬性 display是 CSS 中最重要的用于控制布局的屬性。每個元素都有一個默認的 display 值。對于大多數元素它們的默認值通常是 block 或 inline ...

ethernet 2019-08-02 15:57 評論0 收藏0
CSS入門指南-4：頁面布局

摘要：屬性是中最重要的用于控制布局的屬性。布局的高度多數情況下，布局中結構化元素乃至任何元素的高度是不必設定的。更新效果如圖以上措施使布局有了明顯改觀。這是《CSS設計指南》的讀書筆記，用于加深學習效果。 display 屬性 display是 CSS 中最重要的用于控制布局的屬性。每個元素都有一個默認的 display 值。對于大多數元素它們的默認值通常是 block 或 inline ...

Stardustsky 2019-08-29 13:08 評論0 收藏0
優化關鍵渲染路徑

摘要：三種渲染流程實際場景下，大概會有三種常見的渲染流程注意和步驟是可避免的優化瀏覽器會在和加載完開始渲染頁面。優化避免阻塞解析器通過以上兩種方式引入均會阻塞，因而會阻塞出現在腳本后面的標記的渲染。瀏覽器渲染原理 showImg(https://segmentfault.com/img/remote/1460000009159494?w=538&h=507);showImg(https:/...

Integ 2019-08-20 17:43 評論0 收藏0
CSS知識點及技巧整理

摘要：當元素在容器中被滾動超過指定的偏移值時，元素在容器內固定在指定位置。詳見浮動與清除浮動浮動相關知識屬性的取值元素向左浮動。是相對長度單位，相對于當前對象內文本的字體尺寸。這些個知識點是我個人認為的，下面我們就來看看這些個知識點。 1.怎么讓一個不定寬高的 DIV，垂直水平居中? 使用Flex 只需要在父盒子設置：display: flex; justify-content: cent...

masturbator 2019-08-30 14:02 評論0 收藏0