关于元素浮动-优快云博客

本文链接：https://blog.youkuaiyun.com/flyffffly/article/details/137060201

本文介绍了文档流的概念，元素在文档流中的行为（如块元素和行内元素），以及浮动的定义、设置方法和用途。重点讨论了浮动对布局的影响，包括文字环绕图片、父元素塌陷和元素重叠问题，以及相应的解决策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是文档流？

一个网页中最底下的那一层就称为文档流，文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排列。

元素在文档流中有以下特点：

块元素：在文档流中会独占一行，块元素会自上向下排列，可以设置宽和高。

行内元素：在文档流中只占自身的大小，会默认从左向右排列，不可以设置宽和高，若父级元素是块元素，则行内元素会在父级元素内像气球一样填充。

什么是浮动？

可以这么理解，我把一个元素提起来，浮动在其他元素上方，那么该元素就脱离了文档流，在新的一层，不受其他元素的影响。

浮动的设置

在css中，设置浮动的方法如下：

选择器 {
    float: 属性值;
}

属性值	描述
left	元素左浮动
right	元素右浮动
none	元素不浮动（默认值）

浮动有什么用？

文字环绕图片

当我们想实现文字环绕的效果时，就需要用到浮动，因为浮动虽然脱离了文档流，但是还是会影响到文档流中的文字排版，以下是一个应用实例：

<style>
    div{
        width: 500px;
        height: 500px;
        background-color: red;
    }

    img{
        float: left;
    }

</style>
<body>
    <div>
        <p>
            <img src="../image/111.jpg" width="100px" height="100px">
            文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
        </p>

    </div>
</body>

会有如下效果：

但当我们去掉浮动属性后，会发生什么呢？

可以看到，此时文本不再环绕图片。

行内元素设置宽高

在一个行内元素设置浮动后，该元素就可以设置宽和高了。

<style>
    div{
        width: 500px;
        height: 500px;
        background-color: yellow;
    }

    #s1{
        float: left;
        width: 200px;
        height: 50px;
    }
</style>
<body>
    <div>

        <span id="s1">123</span>
        <span id="s2">456</span>
        <span id="s3">789</span>

    </div>
</body>

可以看到此时span元素也有200px的宽了。

块级元素水平排列

<style>
    .div1{
        float: left;
        width: 300px;
        height: 200px;
        background-color: yellow;
        align-content: center;
    }
    .div2{
        float: left;
        width: 300px;
        height: 200px;
        background-color: blue;
        align-content: center;
    }
    .div3{
         float: left;
         width: 300px;
         height: 200px;
        background-color: green;
        align-content: center;
     }
</style>
<body>
    <div class="div1">
        div1
    </div>
    <div class="div2">
        div2
    </div>
    <div class="div3">
        div3
    </div>
</body>

此时块级元素会水平排列。

如果将参数left改为right，那么会变成右浮动，会出现以下结果：

浮动的副作用

父元素塌陷

浮动会引起父元素塌陷，我们知道当一个div元素没设置高时，它的高会由子元素来撑开，如下：

<style>
    .fdiv{
        background-color: blue;
    }
    .fdiv div{
        width: 500px;
        height: 500px;
        background-color: yellow;
    }
</style>
<body>
    <div class="fdiv">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

</body>

当子元素设置浮动后，会出现以下情况：

可以看到父元素已经没有高度了，这就是浮动的一个副作用，所以我们要清除浮动。

解决方案

1.在父元素中添加overflow: hidden;属性，则可让父元素包含浮动元素，可以解决高度塌陷的问题。

2.为父元素设置一个高度（不建议）

元素重叠

<style>

    .d{
        width: 300px;
        height: 300px;
        border: 5px solid red ;
        background-color: yellow;
        float: left;

    }

    .div1{
        width: 400px;
        height: 400px;
        border: 5px solid red ;
        background-color: blue;
    }

    .fatd{

        border: 5px solid red ;
        background-color: green;
    }

</style>
<body>
    <div class="fatd">
        <div class="d"></div>
        <div class="d"></div>
        <div class="d"></div>
        <div class="div1"></div>

    </div>
</body>