CSS清除浮动与定位的使用方法

最新推荐文章于 2025-03-10 19:40:59 发布

三岁九年

最新推荐文章于 2025-03-10 19:40:59 发布

阅读量1.3k

点赞数 1

文章标签： css html

本文链接：https://blog.youkuaiyun.com/xh0112/article/details/110987834

版权

本文详细介绍了CSS中清除浮动的六种方法及其优缺点，包括设置父元素高度、浮动、overflow：hidden、行内块、伪元素以及避免使用的其他方法。接着，文章深入讲解了ifont图标的使用，并探讨了定位的各种类型，如相对定位、绝对定位、固定定位、粘性定位以及它们的应用场景，如盖亚效果、z-index属性和小圆点的创建。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浮动

一.清除浮动的方法

1.方法一

给父元素设置高度
示例

先看下没有清除的效果：

<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
</body>

css样式

        .father{
            background-color: violet;
        }
        .son1,.son2{
            width: 300px;
            height: 150px;
            float: left;
        }
        .son1{
            
            background-color: teal;
        }
        .son2{
            background-color: tomato;
        }

在这里插入图片描述
这下让我们看下方法一设置父元素的高度

然后运行：

可以看到父元素的宽度出来了，样式清除浮动。
【注】不推荐使用
理由：不能把高度固定死，不适合做自适应的效果。

2.方法二

父元素添加浮动。
示例
来看看添加的样式结果如何：

在这里插入图片描述
看看运行结果：

可以看到父元素的宽高由子元素的内容影响。

但是这样会影响整个网页的排版，都脱离了正常文本流。就会这样：
让在后面添加一个元素：

在这里插入图片描述

给他设置宽高背景颜色

在这里插入图片描述

所以不推荐使用，
理由：会影响后面的元素布局。

3.方法三

添加 overflow：hidden
添加overflow：hidden之后，父盒子会拥有BFC属性
这个属性的其他作用可以清除浮动，，但是由于他是会引起文本超出的内容会被隐藏，所以不推荐使用。

不推荐
优点：简单。
缺点：内容比较多的时候，容易造成内容被隐藏。

4.方法四

设置父盒子为行内块
示例

    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
    <span>面对疾风吧</span>
    <div class="box"></div>

设置行内块元素

在这里插入图片描述

运行：
在这里插入图片描述
不推荐：
理由：会影响后面的元素布局。

5.方法五

使用伪元素清除浮动（推荐使用）

给父元素添加伪元素：：after

.father::after{
            /* 伪元素必写，否则不生效，可以设置为空 */
            content: "";
            /* 不允许左侧和右侧有浮动效果 */
            clear: both;
            /* clear:both 只会对块元素生效。 */
            display: block;
        }

这样就可以正常的取消浮动了。

在这里插入图片描述

在这里插入图片描述正常显示，推荐使用。

6.伪元素

上面我们看到使用伪元素，接下来正好来看看伪元素。

css的伪元素，是指他们不是真正的页面元素。html中并没有对应的结构，但是其用法与表现，行为与真正的页面元素一样。

：before
格式：
选择器：：before
：after
格式：
选择器：：after

【注】设置伪元素，content是必须添加的。
添加的内容是默认为行内元素的。

2.ifont图标

添加小图标
在这里插入图片描述
1.使用link标签引入css
eg:
< link rel=“stylesheet” href=“https://at.alicdn.com/t/font_2200456_jdy81d52pfi.css”>
2.使用span标签，class属性中添加‘iconfont icon-XXX’
xxx为每个图标的专属类名。