CSS基础（六）：浮动深入

深藏阁楼爱情的钟 2022-05-24 08:57 183阅读 0赞

**浮动**

在标准流中，一个块级元素在水平方向会自动伸展，直到包含它的元素边界；而在竖直方向和兄弟元素依次排列，不能并排。使用浮动方式后，块级元素的表现就会不同。简单的说多个不设宽度的块级的元素可以横向排列。

CSS中有float属性，默认为none，也就是标准流通常的情况。如果将float属性设置为left或right，元素就会向其父元素的左侧或右侧紧靠，同时默认情况下，盒子的宽度不再伸展，而是根据盒子里面的内容的宽度来确定。

**准备代码**

先制作一个页面，然后再设置浮动进行分析。

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>float属性</title>
    <style type="text/css">
    body{
        margin:15px;
        font-family:Arial; font-size:12px;
        }
    
    .father{
        background-color:#ffff99;
        border:1px solid #111111;
        padding:5px;                
        }
    
    .father div{
        padding:10px;                
        margin:15px;                    
        border:1px dashed #111111;
        background-color:#90baff;
        }
    
    .father p{
        border:1px dashed #111111;
        background-color:#ff90ba;
        }
    
        
    .son1{
    /* 这里设置son1的浮动方式*/
    
    }
    
    .son2{
    /* 这里设置son1的浮动方式*/
    
    }
    
    .son3{
    /* 这里设置son1的浮动方式*/
    
    }
    
    </style>
    </head>
    <body>
        <div class="father">
            <div class="son1">Box-1</div>
            <div class="son2">Box-2</div>
            <div class="son3">Box-3</div>
            <p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p>
        </div>
    </body>
    </html>

![format_png][]

**设置第1个浮动div **

可以看到标准流中的Box-2的文字在围绕着Box-1排列，此时Box-1的宽度不再伸展，而是能容纳下内容的最小宽度。那么Box-2的盒子宽度范围如何确定呢？用Firebug可以发现，是与Box-1的左边框重合，因为此时Box-1已经脱离标准流，标准流中的Box-2会顶到原来Box-1的位置，而文字会围绕着Box-1排列。

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>float属性</title>
    <style type="text/css">
    body{
        margin:15px;
        font-family:Arial; font-size:12px;
        }
    
    .father{
        background-color:#ffff99;
        border:1px solid #111111;
        padding:5px;                
        }
    
    .father div{
        padding:10px;                
        margin:15px;                    
        border:1px dashed #111111;
        background-color:#90baff;
        }
    
    .father p{
        border:1px dashed #111111;
        background-color:#ff90ba;
        }
    
        
    .son1{
    /* 这里设置son1的浮动方式*/
    float:left;
    }
    
    .son2{
    /* 这里设置son1的浮动方式*/
    
    }
    
    .son3{
    /* 这里设置son1的浮动方式*/
    
    }
    
    </style>
    </head>
    <body>
        <div class="father">
            <div class="son1">Box-1</div>
            <div class="son2">Box-2</div>
            <div class="son3">Box-3</div>
            <p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，
    这里是浮动框外围的文字，
    这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p>
        </div>
    </body>
    </html>

![format_png 1][]

**设置第2个浮动div**

将Box-2的float属性也设置为left，可以看到Box-2也变为根据内容确定宽度，并使Box-3的文字围绕Box-2排列。Box-2的盒子宽度

也是与Box-1的左边框重合，Box-1和Box-2之间的空白是由两者的空白叠加而形成的。

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>float属性</title>
    <style type="text/css">
    body{
        margin:15px;
        font-family:Arial; font-size:12px;
        }
    
    .father{
        background-color:#ffff99;
        border:1px solid #111111;
        padding:5px;                
        }
    
    .father div{
        padding:10px;                
        margin:15px;                    
        border:1px dashed #111111;
        background-color:#90baff;
        }
    
    .father p{
        border:1px dashed #111111;
        background-color:#ff90ba;
        }
    
        
    .son1{
    /* 这里设置son1的浮动方式*/
    float:left;
    }
    
    .son2{
    /* 这里设置son1的浮动方式*/
    float:left;
    }
    
    .son3{
    /* 这里设置son1的浮动方式*/
    
    }
    
    </style>
    </head>
    <body>
        <div class="father">
            <div class="son1">Box-1</div>
            <div class="son2">Box-2</div>
            <div class="son3">Box-3</div>
            <p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，
    这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p>
        </div>
    </body>
    </html>

![format_png 2][]

**设置第3个浮动div**

可以看到文字会围绕浮动的的盒子排列。

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>float属性</title>
    <style type="text/css">
    body{
        margin:15px;
        font-family:Arial; font-size:12px;
        }
    
    .father{
        background-color:#ffff99;
        border:1px solid #111111;
        padding:5px;                
        }
    
    .father div{
        padding:10px;                
        margin:15px;                    
        border:1px dashed #111111;
        background-color:#90baff;
        }
    
    .father p{
        border:1px dashed #111111;
        background-color:#ff90ba;
        }
    
        
    .son1{
    /* 这里设置son1的浮动方式*/
    float:left;
    }
    
    .son2{
    /* 这里设置son1的浮动方式*/
    float:left;
    }
    
    .son3{
    /* 这里设置son1的浮动方式*/
    float:left;
    }
    
    </style>
    </head>
    <body>
        <div class="father">
            <div class="son1">Box-1</div>
            <div class="son2">Box-2</div>
            <div class="son3">Box-3</div>
            <p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，
    这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p>
        </div>
    </body>
    </html>

![format_png 3][]

**改变浮动的方向**

将Box-3改为向右浮动，可以看到Box-3移动到了最右端，文字段落盒子的范围没有改变，但是文字变成了夹在Box-2和Box-3之间。

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>float属性</title>
    <style type="text/css">
    body{
        margin:15px;
        font-family:Arial; font-size:12px;
        }
    
    .father{
        background-color:#ffff99;
        border:1px solid #111111;
        padding:5px;                
        }
    
    .father div{
        padding:10px;                
        margin:15px;                    
        border:1px dashed #111111;
        background-color:#90baff;
        }
    
    .father p{
        border:1px dashed #111111;
        background-color:#ff90ba;
        }
    
        
    .son1{
    /* 这里设置son1的浮动方式*/
    float:left;
    }
    
    .son2{
    /* 这里设置son1的浮动方式*/
    float:left;
    }
    
    .son3{
    /* 这里设置son1的浮动方式*/
    float:right;
    }
    
    </style>
    </head>
    <body>
        <div class="father">
            <div class="son1">Box-1</div>
            <div class="son2">Box-2</div>
            <div class="son3">Box-3</div>
            <p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，
    这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p>
        </div>
    </body>
    </html>

![format_png 4][]

当慢慢缩小浏览器窗口时，Box-2和Box-3的距离会越来越小，文字会布满空间，但缩小到一定程度时，Box-3会被挤到下一行，但仍保持向右浮动。

![format_png 5][]

**再次改变浮动的方向**

将Box-2改为向右浮动，Box-3改为向左浮动。布局和上面例子一样。

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>float属性</title>
    <style type="text/css">
    body{
        margin:15px;
        font-family:Arial; font-size:12px;
        }
    
    .father{
        background-color:#ffff99;
        border:1px solid #111111;
        padding:5px;                
        }
    
    .father div{
        padding:10px;                
        margin:15px;                    
        border:1px dashed #111111;
        background-color:#90baff;
        }
    
    .father p{
        border:1px dashed #111111;
        background-color:#ff90ba;
        }
    
        
    .son1{
    /* 这里设置son1的浮动方式*/
    float:left;
    }
    
    .son3{
    /* 这里设置son3 的浮动方式*/
    float:left;
    }
    
    .son2 {
    /* 这里设置son2 的浮动方式*/
    float:right;
    }
    
    </style>
    </head>
    <body>
        <div class="father">
            <div class="son1">Box-1</div>
            <div class="son2">Box-2</div>
            <div class="son3">Box-3</div>
            <p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，
    这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p>
        </div>
    </body>
    </html>

![format_png 6][]

当慢慢缩小浏览器窗口时，Box-2和Box-3的距离会越来越小，文字会布满空间，但缩小到一定程度时，Box-3会被挤到下一行，但仍保持向左浮动。

![format_png 7][]

**清除浮动**

使用clear属性清除浮动，设置为left，消除左边浮动的影响；设置为right，消除右边浮动的影响；当设置为both，同时消除左右两边浮动的影响。后面将会在CSS技巧教程中介绍到。

--------------------

![20191229112121499.png][]

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[format_png]: /images/20220524/1ee4312ef5f641b48352f4a3b3e29bb2.png
[format_png 1]: /images/20220524/7f7623a0339e4333a83fd61a817afc71.png
[format_png 2]: /images/20220524/3e810876be7348adb948720ebdc8fbce.png
[format_png 3]: /images/20220524/87307e314242493992c1f7716470cdd9.png
[format_png 4]: /images/20220524/459cd8cfeab04458aec410fcb453557d.png
[format_png 5]: /images/20220524/a838e1c439d8466d82cd0ce2e0f772b0.png
[format_png 6]: /images/20220524/f072f7363ea54126a1f5b8f44a780ae4.png
[format_png 7]: /images/20220524/57c7b690cb514bc4bddca10347d618a1.png
[20191229112121499.png]: /images/20220524/9f01638839234f77aa71f643e16b00a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: /images/20220524/06a5e3115e54472cb944b7cc81db085e.png