CSS中清除浮动的作用讲解与演示

最新推荐文章于 2023-04-27 11:08:06 发布

迟到_啦

最新推荐文章于 2023-04-27 11:08:06 发布

阅读量726

点赞数

分类专栏：前端学习版块文章标签：清除浮动浮动的影响 CSS float与clear

本文链接：https://blog.csdn.net/qq_19314763/article/details/112015259

版权

前端学习版块专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、浮动的作用

浮动在布局方面会起到很大作用，块级元素都是独占一行，要想让多个块级元素同一行展示，就需要浮动

2、浮动之后的影响

如果一个div1中的子div进行了浮动，而子div的高度不是事先确定好的，而是通过js动态提供的，这也就意味着，子div在页面加载之前是没有高度的，那么div1作为父元素，必然也不能直接写死一个高度（当父子元素高度不一致时，布局上会出现不理想的效果）

参考代码如下（未清除浮动）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动与清除浮动学习</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <style>
        #div1 {
            border:2px solid orange;
            background-color: red;
        }
        #son1 {
            float: left;
            margin-left:20px;
            background-color: grey;
            width: 20%;
        }
        #son2 {
            float: right;
            margin-right:20px;
            background-color: green;
            width: 30%;
        }
    </style>
    <script>
        $(function(){
            var height = prompt("请输入子元素的高度")
            $("#son1").height(height)
            $("#son2").height(height-20)
        })
    </script>
</head>
<body>
    <div id="div1">
        <div id="son1">div1子元素1</div>
        <div id="son2">div1子元素2</div>
    </div>
    <div style="border: 2px solid blue;">
        我是div1的兄弟元素div2
    </div>
</body>

</html>

假设子元素浮动后，不清除浮动，当输入子元素的高度为50后，看到的效果如下：
在这里插入图片描述

从上图可以看出，div1的高度为0，只出现了一个div1的边框，你可能会说，div1没有设置高度，肯定没有高度呀，但是div1有子div元素，子的div的高度理论上是会撑起来父元素的高度。

然而结果却没有，这是因为div1的子元素设置了浮动，浮动之后该元素脱离了文档流，它的高度与div1是没有关系的，那么此时div2作为兄弟元素，出现的位置在div1的下方其实就可以理解了，但是这种效果并不是我们希望看到的。

总结一下浮动带来的影响：

当某元素的高度不能直接写死，且其子元素设置了浮动，此时因为子元素脱离了文档流，它的高度是不能直接将父元素撑起来的，就会导致父元素在文档流中没有高度，然后被其兄弟元素占据位置，从而导致布局混乱的结果

3、解决浮动影响：清除浮动

基于上述浮动后的影响，要解决的问题就是：
子元素浮动后，子元素的高度要撑满其父元素，这样才可以使得父元素在文档流中的高度与其子元素是一样的，也就解决了出现布局错乱的情况

怎样让一个浮动元素的高度能撑起其父元素呢？
答案就是：添加清除浮动的代码

先看清除浮动后的效果：

在这里插入图片描述

从上图可以看出，div1的高度被子元素撑起来了，浮动带来的影响在清除浮动后已经消失了

清除浮动后的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动与清除浮动学习</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <style>
        #div1 {
            border:2px solid orange;
            background-color: red;
        }
        #son1 {
            float: left;
            margin-left:20px;
            background-color: grey;
            width: 20%;
        }
        #son2 {
            float: right;
            margin-right:20px;
            background-color: green;
            width: 30%;
        }
        /*清除浮动代码*/
        .clearfloat1 {
            clear: both
        }
    </style>
    <script>
        $(function(){
            var height = prompt("请输入子元素的高度")
            $("#son1").height(height)
            $("#son2").height(height-20)
        })
    </script>
</head>
<body>
    <div id="div1" class="div1 clearfloat2">
        <div id="son1">div1子元素1</div>
        <div id="son2">div1子元素2</div>
        <div class="clearfloat1"></div>
    </div>
    <div style="border: 2px solid blue;">
        我是div1的兄弟元素div2
    </div>
</body>

</html>

4、关于清除浮动的多种方式介绍

参考链接：清除浮动影响的几种方法

迟到_啦

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS中清除浮动的作用讲解与演示

目录1、浮动的作用2、浮动之后的影响3、解决浮动影响：清除浮动4、关于清除浮动的多种方式介绍1、浮动的作用浮动在布局方面会起到很大作用，块级元素都是独占一行，要想让多个块级元素同一行展示，就需要浮动2、浮动之后的影响如果一个div1中的子div进行了浮动，而子div的高度不是事先确定好的，而是通过js动态提供的，这也就意味着，子div在页面加载之前是没有高度的，那么div1作为父元素，必然也不能直接写死一个高度（当父子元素高度不一致时，布局上会出现不理想的效果）参考代码如下（未清除浮动）：
复制链接

扫一扫