首页 > 其他分享> > 浮动·消除浮动

浮动·消除浮动

2021-12-29 09:04:43 作者：互联网

浮动

什么是浮动

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

浮动元素

对于浮动元素有几点要记住。首先，会以某种方式将浮动元素从文档的正常流中删除，不过还是会影响布局。采用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>

在这里插入图片描述

结束结束，又是做码农的一天
在这里插入图片描述

标签：浮动,color,100px,height,width,background,消除
来源： https://blog.csdn.net/weixin_51610980/article/details/122201460

浮动·消除浮动

浮动

什么是浮动

浮动元素

元素浮动的影响

消除浮动

利用clear清除

建立BFC环境

利用`clear`清除