css属性之float浮动的用法

css float浮动的基本用法，代码效果演示，浮动的影响以及清除浮动的方法

.慢慢亦漫漫

3980人浏览 · 2021-12-28 20:06:41

.慢慢亦漫漫 · 2021-12-28 20:06:41 发布

1.相关的基本概念

1.1文档流

在web网页制作元素排版布局中，各个元素从左到右，从上到下依次排列的流式布局，就称之为文档流。

1.2脱离文档流

文档流的限制很多，很多时候满足不了我们对布局的要求，这时候我们需要采取一些方法脱离文档流，来达到效果。脱离文档流是指元素浮动起来，不在文档流中占据物理空间，其他元素会占据他原本的位置。

1.3行内元素

与其他行内元素并排，不能设置宽和高，它的宽和高默认值就是文字的宽和高。

1.4块级元素

独自霸占父元素一行，不能和其他元素并排排列，可以设置宽和高，如果不设置，和父元素宽和高保持一样。

2.float浮动

2.1浮动的理解

浮动的元素已经脱离了文档流，不再占有文档流的空间，其他没有浮动的元素会补位。
浮动的元素可以向左或者向右浮动，直到它碰到父元素的框或者其他浮动元素的框
浮动的元素依然在父元素里面

2.2浮动的6种取值

left：靠左浮动
right：靠右浮动
inline-start：关键字，表明元素必须浮动在其所在块容器的开始一侧，在ltr脚本中是左侧，在rtl脚本中是右侧。
inline-end：关键字，表明元素必须浮动在其所在块容器的结束一侧，在ltr脚本中是右侧，在rtl脚本中是左侧。
none：不浮动
inherit：继承父元素的浮动属性

2.3浮动的实例演示

（1）左浮动
首先我们写三个div分别给他们加上背景色以及宽和高，body也加上背景色，先来看看没有浮动，三个div处于标准文档流中的效果。
代码展示：

<style>
    #div1{
        background-color: blue;
        width: 400px;
        height: 150px;
        
    }
    #div2{
        background-color: green;
        width: 400px;
        height: 150px;
      
    }
    #div3{
        background-color: yellow;
        width: 400px;
        height: 150px;
    }
    body{
        background-color: rgb(250, 186, 250);
    }
</style>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>

网页效果展示：
没有浮动效果展示

现在我们给div2设置一个左浮动，看一下效果：

 #div2{
        background-color: green;
        width: 400px;
        height: 150px;
        float: left;
    }

左浮动展示效果
设置左浮动以后，我们发现div3在我们视线里面看不见了，这是因为，我们给div2设置左浮动他就脱离文档流了，他原本的位置被div3顶替了，div3的大小和div2一样，所以，我们此时看不见div3，如果我们div2调整透明度，或者讲div3大小调大一点我们可以很明显看清楚他们的位置。
（2）右浮动
div1设置右浮动，其他都不变，看下效果：

#div1{
        background-color: blue;
        width: 400px;
        height: 150px;
        float: right;
        
    }
    #div2{
        background-color: green;
        width: 400px;
        height: 150px;
        float: none;
    }
    #div3{
        background-color: yellow;
        width: 400px;
        height: 150px;
        
    }

div3右浮动展示效果
这个效果非常明显，div1设置右浮动后，div1紧挨body右边框，div2占据了原本div1的位置，div3占据了div2的位置。
（3）div1和div2同时左浮动

#div1{
        background-color: blue;
        width: 400px;
        height: 150px;
        float: left;
        
    }
    #div2{
        background-color: green;
        width: 400px;
        height: 150px;
        float: left;
    }

同时左浮动效果
从图中可以看出div2紧挨着div1排列在第一行，div3顶替了原本div1的位置，也就是在现在div1的下方。
（4）调整div1和div2的宽度，并同时调整左浮动
3个div均在文档流中的效果：
标准文档流的效果
调整div1和div2 左浮动：

 #div1{
        background-color: blue;
        width: 800px;
        height: 150px;
        float: left;
        
    }
    #div2{
        background-color: green;
        width: 1000px;
        height: 150px;
        float: left;
    }
    #div3{
        background-color: yellow;
        width: 400px;
        height: 400px;
        
    }