2025年浮动带来的影响

大家好，我是讯享网，很高兴认识大家。

一、浮动对自身的影响

一旦元素设置了浮动，不管这个元素是什么类型，都会转化为块元素，也就是此时display属性的取值为block。

举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    strong
    {
        float: left;
        width: 120px;
        height: 60px;
        border: 1px solid gray;
        line-height: 60px;
        text-align: center;
    }/*strong为inline元素，但是设置了浮动后变为块元素，这里的strong可以设置width、height、padding、margin*/
    </style>
</head>
<body>
    <strong>Hello</strong>
</body>
</html>

讯享网

二、浮动对父元素的影响

当父元素高度小于子元素或者父元素没有说设置高度，父元素不能将子元素包裹起来，这是会造成父元素高度塌陷

举例

讯享网<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    #father
    {
        width: 300px;
        border: 1px solid black;
    }
    #first,#second
    {
        width: 100px;
        height: 50px;
        border: 1px solid red;
    }
    #first
    {float: left;}
    #second
    {
        float: right;
    }
    </style>
</head>
<body>
    <div id="father">
        <div id="first"></div>
        <div id="second"></div>
    </div>
</body>
</html>

这是由于父元素为定义高度，造成了父元素高度塌陷

 height: 25px;

此时的父元素定义的高度小于元素高度，此时父元素仍然未能包裹子元素，仍然存在父元素高度塌陷问题

讯享网height: 75px;

此时父元素定义的高度大于子元素定义的高度，因此不会存在父元素高度塌陷问题

三、对兄弟元素的影响

1、兄弟元素时浮动元素

1.1同一方向的兄弟元素

当浮动元素碰到同一方向的兄弟元素时，这些元素会从左到右、从上到下，紧挨着排列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #father
        {
            width: 300px;
            height: 30px;
            border: 1px solid black;
        }
        #first,#second
        {
            float: left;
            width: 80px;
            height: 80px;
            border: 1px solid grey;
            margin-top: 10px;
            margin-left: 10px;
            margin-right: 10px;
            background-color: #f1f1f1
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="first">1</div>
        <div id="second">2</div>
    </div>
</body>
</html>

1.2相反方向的兄弟元素

当浮动元素为两个相反方向的兄弟元素，这两个元素会移向两边

讯享网<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #father
        {
            width: 300px;
            height: 30px;
            border: 1px solid red;
        }
        #first,#second
        {
            width: 80px;
            height: 80px;
            border:1px solid grey;
            margin-right: 10px;
            margin-top: 10px;
            background-color: #f1f1f1;

        }
        #first{float: left;}
        #second{float: right;}
    </style>
</head>
<body>
    <div id="father">
        <div id="first">1</div>
        <div id="second">2</div>
    </div>
</body>
</html>

2、兄弟元素不是浮动元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    #father
    {
        width: 200px;
        height: 150px;
        border: 1px solid red;
    }
    #first
    {
        width: 80px;
        height: 80px;
        border: 1px solid gray;
        float: left;
        background-color: #f4f6f4;
    }
    #third,#second
    {
        width: 100px;
        height: 30px;
        border:1px solid gray;
    }
    </style>
</head>
<body>
    <div id="father">
        <div id="first">1</div>
        <div id="second">2</div>
        <div id="third">3</div>
    </div>
</body>
</html>

由图可知第一个div脱离了文档流并覆盖了第二个和第三个div

当给第二个和第三个div添加一个左浮动，此时第一个div不再覆盖第二个和第三个div

四、对子元素的影响

如果一个元素时浮动元素，并且它的子元素也是浮动元素，那么这个元素会自适应的包含该子元素

讯享网<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    #father
    {
        width: 300px;
        border: 1px solid black;
        float: left;
    }
    #first,#second
    {
        width: 100px;
        height: 50px;
        border: 1px solid red;

    }
    #first
    {float: left;}
    #second{float: right;}
    </style>
    
</head>
<body>
    <div id="father">
        <div id="first"></div>
        <div id="second"></div>
    </div>
</body>
</html>