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

最新推荐文章于 2023-07-20 17:15:10 发布

三岁九年

最新推荐文章于 2023-07-20 17:15:10 发布

阅读量1.2k

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/xh0112/article/details/110987834

版权

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

摘要由CSDN通过智能技术生成

浮动

一.清除浮动的方法

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