清除浮动的办法

一颗西柚酱

已于 2022-08-16 11:11:51 修改

阅读量42

点赞数 1

文章标签： javascript

于 2022-08-16 10:56:11 首次发布

本文链接：https://blog.csdn.net/howbeauty/article/details/126361093

版权

浮动产生的背景

那五八同城的岗位模块来举例子，在前期，我们设计人员设计的时候，可能还不能够确定有多少个待补充的岗位，所以就不要设置高度，把高度直接定死了的话，后期添加元素会非常的麻烦，所以，我们就要利用浮动，只给宽度，不给高度。

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

        span {
            width: 20%;
            height: 30px;
            background-color: green;
            margin-left: 3px;
            float: left;
            margin-bottom: 3px;
        }
    </style>
</head>

<body>

    <div class="big-box">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>


</body>

由于没有为父盒子设置高度，导致父盒子没有大小，撑不开，父盒子的东西不会被显示

在这里插入图片描述

解决办法

1 在儿子群结束位置后面添加块级标签

p 标签内要添加清除浮动样式，目的是为了告诉父盒子，浮动结束，可计算高度了


        p {
            clear: both;

        }

在这里插入图片描述

创建BFC

1、给父元素添加overfloat：auto

2、给父元素添加float ：即浮动的父元素包含浮动的子元素
3.伪元素

介绍一下伪元素

     .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }

一颗西柚酱

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
清除浮动的办法

清除浮动方式
复制链接

扫一扫

清除浮动的办法

浮动产生的背景

解决办法

1 在儿子群 结束位置后面添加块级标签

创建BFC

介绍一下伪元素

1 在儿子群结束位置后面添加块级标签