浮动·消除浮动

2024-01-11 17:13:22

浮动

什么是浮动

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。它可以让任何盒子可以在一行排列，用浮动来布局。

浮动元素

对于浮动元素有几点要记住。首先，会以某种方式将浮动元素从文档的正常流中删除，不过还是会影响布局。采用css的特有方式，浮动元素几乎“自成一派”，不过它们还是对文档的其余部分有影响。这种影响源自于一个事实一个元素浮动时，其它内容那个会“环绕”该元素。
简记：脱离正常的文档流，不保存物理空间

元素浮动的影响

1、对其父元素的影响

对于其父元素来说，元素浮动之后，它脱离文档流，无法撑开其父元素，造成父元素的塌陷(高度为0)
例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #div1{
       border: 5px black solid;
    }
    #div2{
       width: 100px;
       height: 100px;
        background-color: blue;
    }
</style>
<body>
    <div id="div1">
        <div id="div2">
        </div>
    </div>

</body>
</html>

效果展示

当将其中子div向左移动时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #div1{
       border: 5px black solid;
    }
    #div2{
       width: 100px;
       height: 100px;
        background-color: blue;
        float: left;
    }
</style>
<body>
    <div id="div1">
        <div id="div2">
        </div>
    </div>

</body>
</html>

效果展示

2、对非浮动兄弟元素的影响

如果兄弟元素为块级元素，该元素会忽视浮动元素的而占据它的位置，并且元素会处在浮动元素的下层。如果如果兄弟元素为内联元素，则元素会环绕浮动元素排列。
例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #div1{
       border: 5px black solid;
    }
    #div2{
       width: 100px;
       height: 100px;
        background-color: blue;
    }
    #div3{
        width: 100px;
       height: 100px;
        background-color: rgb(181, 245, 32);
    }
</style>
<body>
    <div id="div1">
        <div id="div2">
        </div>
        <div id="div3">

        </div>
    </div>

</body>
</html>

效果展示

当其中一个浮动时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #div1{
       border: 5px black solid;
    }
    #div2{
       width: 100px;
       height: 100px;
        background-color: blue;
        float: left;
    }
    #div3{
        width: 100px;
       height: 100px;
        background-color: rgb(181, 245, 32);
    }
</style>
<body>
    <div id="div1">
        <div id="div2">
        </div>
        <div id="div3">

        </div>
    </div>

</body>
</html>

3.浮动兄弟元素的影响

同一个方向浮动：当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面
反方向浮动：互不影响，位于同一条水平线上，一行不够时，后面的元素会排在下一行
例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #div1{
       border: 5px black solid;
    }
    #div2{
       width: 100px;
       height: 100px;
        background-color: blue;
    }
    #div3{
        width: 100px;
        height: 100px;
        background-color: rgb(181, 245, 32);
    }
    #div4{
        width: 100px;
         height: 100px;
        background-color: rgb(240, 12, 69);
    }
</style>
<body>
    <div id="div1">
        <div id="div2">
        </div>

        <div id="div3">
    
        </div>
        <div id="div4">
    
        </div>
    </div>

</body>
</html>

效果展示

加上浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #div1{
       border: 5px black solid;
    }
    #div2{
       width: 100px;
       height: 100px;
        background-color: blue;
        float: left;
    }
    #div3{
        width: 100px;
        height: 100px;
        background-color: rgb(181, 245, 32);
        float: left;
    }
    #div4{
        width: 100px;
         height: 100px;
        background-color: rgb(240, 12, 69);
        float: right;
    }
</style>
<body>
    <div id="div1">
        <div id="div2">
        </div>

        <div id="div3">
    
        </div>
        <div id="div4">
    
        </div>
    </div>

</body>
</html>

效果展示

4、对子元素的影响

当一个元素浮动时，它的高度和宽度由子元素撑开。
例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #div1{
       border: 5px black solid;
    }
    #div2{
       width: 100px;
       height: 100px;
        background-color: blue;

    }
    #div3{
        width: 100px;
        height: 100px;
        background-color: rgb(181, 245, 32);
    }
    #div4{
        width: 100px;
         height: 100px;
        background-color: rgb(240, 12, 69);
    }
</style>
<body>
    <div id="div1">
        <div id="div2">
        </div>

        <div id="div3">
    
        </div>
        <div id="div4">
    
        </div>
    </div>

</body>
</html>

效果展示

加上浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #div1{
       border: 5px black solid;
       float: left; 
    }
    #div2{
       width: 100px;
       height: 100px;
        background-color: blue;

    }
    #div3{
        width: 100px;
        height: 100px;
        background-color: rgb(181, 245, 32);
    }
    #div4{
        width: 100px;
         height: 100px;
        background-color: rgb(240, 12, 69);
    }
</style>
<body>
    <div id="div1">
        <div id="div2">
        </div>

        <div id="div3">
    
        </div>
        <div id="div4">
    
        </div>
    </div>

</body>
</html>

效果展示

消除浮动

利用`clear`清除

clear	描述
left	清除左侧浮动的影响
right	清除右侧浮动的影响
both	同时清除左右两侧浮动的影响

添加clear的两种形式

添加div（如果需要清楚地浮动比较多，会比较繁杂）
after伪元素
例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #div1{
       border: 5px black solid;
    }
    #div2{
       width: 100px;
       height: 100px;
        background-color: blue;
        float: right;
    }
</style>
<body>
    <div id="div1">
        <div id="div2">
        </div>
    </div>

</body>
</html>

效果展示：

进行添加div消除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #div1{
       border: 5px black solid;
    }
    #div2{
       width: 100px;
       height: 100px;
        background-color: blue;
        float: right;
    }
    #div3{
        clear: right;
    }
</style>
<body>
    <div id="div1">
        <div id="div2">
        </div>
        <div id="div3">
            
        </div>
    </div>

</body>
</html>

效果展示

利用伪元素进行消除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #div1{
       border: 5px black solid;
    }
    #div2{
       width: 100px;
       height: 100px;
        background-color: blue;
        float: right;
    }
    div::after{
        content: '';
        display: block;
        clear: both;
    }
</style>
<body>
    <div id="div1">
        <div id="div2">
        </div>
    </div>

</body>
</html>

效果展示

建立BFC环境

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #div1{
       border: 5px black solid;
       overflow: hidden;
    }
    #div2{
       width: 100px;
       height: 100px;
        background-color: blue;
        float: right;    
    }
</style>
<body>
    <div id="div1">
        <div id="div2">
        </div>
    </div>

</body>
</html>

结束结束，又是做码农的一天

码农公寓

浮动

什么是浮动

浮动元素

元素浮动的影响

消除浮动

利用clear清除

建立BFC环境

相关文章

利用`clear`清除