css浮動

時間 2019-11-12

標籤 css 浮動欄目 CSS 简体版

原文原文鏈接

1）能夠看出，即便div1 的寬度很小，頁面中一行能夠容下div1 和div2，div2 也不會排
在div1 後邊，由於div 元素是塊級元素，獨佔一行的。
2）如何在一行顯示多個div 元素
3）顯然默認的標準流已經沒法知足需求，這就要用到浮動。浮動能夠理解爲讓某個div
元素（或者其餘塊級元素）脫離標準流，漂浮在標準流之上。
4）例如，假設上圖中的div2 浮動，那麼它將脫離標準流，但div一、div三、div4 仍然在標
準流當中，因此div3 會自動向上移動，佔據div2 的位置，從新組成一個流。如css

float:left;/*向左邊浮動*/html

<!DOCTYPE html>
<html>
  <head>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <meta charset="utf-8" />
    <title>css浮動</title>
    <style type="text/css">
        #div1 {
        width:200px;
        height:100px;
        background:#9900FF;} 
                #div2 {
        width:500px;
        height:60px;
        background:#00AAAA;
        float:left;/*向左邊浮動*/} 
                #div3 {
        width:170px;
        height:100px;
        background:#CCCCFF;} 
                #div4 {
        width:90px;
        height:90px;
        background:#D87093;} 
        
        
</style>
  </head>
  <body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
    <div id="div4">div4</div>
  </body>
</html>

clear:left;/*清除左浮動*/html5

clear:both;不容許浮動
git

<!DOCTYPE html>
<html>
  <head>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <meta charset="utf-8" />
    <title>css浮動</title>
    <style type="text/css">
        #div1 {
        width:200px;
        height:100px;
        background:#9900FF;} 
                #div2 {
        width:500px;
        height:60px;
        background:#00AAAA;
        float:left;/*向左邊浮動*/} 
                #div3 {
        width:170px;
        height:100px;
        background:#CCCCFF;
                clear:left;/*清除左浮動*/} 
                #div4 {
        width:90px;
        height:90px;
        background:#D87093;} 
        
        
</style>
  </head>
  <body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
    <div id="div4">div4</div>
  </body>
</html>

若是連續多個元素設置浮動呢？
結論：被設置浮動的元素會組成一個流，而且會橫着緊挨着排隊，直到父元素的
寬度不夠纔會換一行排列。github

        #div1 {
        width:200px;
        height:100px;
        background:#9900FF;
        float:left;/*向左邊浮動*/} 
                #div2 {
        width:500px;
        height:60px;
        background:#00AAAA;
        float:left;/*向左邊浮動*/} 
                #div3 {
        width:170px;
        height:100px;
        background:#CCCCFF;
        float:left;/*向左邊浮動*/} 
                #div4 {
        width:90px;
        height:90px;
        background:#D87093;
        float:left;/*向左邊浮動*/}

相關標籤/搜索

每日一句

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