CSS——清除浮动元素对当前元素所产生的影响

最新推荐文章于 2024-03-10 12:03:53 发布

Bonsoir777

最新推荐文章于 2024-03-10 12:03:53 发布

阅读量1k

点赞数 3

分类专栏： css/css3 文章标签： css3 css html 前端

本文链接：https://blog.csdn.net/Bonsoir777/article/details/125531120

版权

css/css3 专栏收录该内容

32 篇文章 2 订阅

订阅专栏

前言
一、清除浮动元素对当前元素所产生影响的方法
- 1..使用clear清除
- 2.使用after伪类解决高度塌陷
- 3.clearfix
二、阿里图标库的使用方法
- 1.转义字符形式 &实体名字;
- 2.类名形式（常用）
总结

一、清除浮动元素对当前元素所产生影响的方法

如上图，由于受到box1浮动的影响，box2整体向上移动了100px，我们有时希望清除掉其他元素浮动对当前元素产生的影响，这时可以使用clear来完成功能。

具体方法：

1.使用clear清除

原理：设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响

可选值——

left:清除左侧浮动元素对当前元素的影响
right:清除右侧浮动元素对当前元素的影响
both:清除两侧中最大影响的那一侧（也就是宽度最大的那一侧）

2.使用after伪类解决高度塌陷

.box1::after{

content:''; ——内容不显示，无内容显示

display:block; ——after元素是一个行内元素，将它显示为一个块元素

clear: both; ——利用clear 清楚浮动对该元素的影响

}

3.clearfix

可解决高度塌陷和外边距重叠的问题，当遇到这些问题时，可直接使用clearfix

  <style>
        .box1{
            width:200px;
            height:200px;
            background-color:#bfa;
        }
        .box2{
            width:100px;
            height:100px;
            background-color:orange;
            margin-top: 100px;
            }
            .clearfix::before,
            .clearfix::after{
                content:'';
                display:table;
                clear:both;
                }
    </style>
</head>
<body>
    <div class="box1 clearfix">
        <div class="box2"></div>
</div>

二、阿里图标库的使用方法

阿里图标库网址 https://www.iconfont.cn

图标字体（iconfont）

在网页中经常需要使用一些图标，可以通过图片来引入图标本身比较大，也不灵活 -所以使用图标时，我们还可以将图标直接设置为字体，然后通过font-face的形式来对字体进行引入，这样我们就可以通过使用字体的形式来使用图标。

使用方法

例如采用下载至本地的方式，在html文件中引入（link）文档中 iconfont.css文件

 <!-- 引入线下版本  下载下来，如果没有网也是可以生效的 -->
    <link rel="stylesheet" href="./font_3490193_vrezi3p7sp/iconfont.css" />

转义字符形式 &实体名字;

<span class="iconfont s1">&#xe600;</span>
    <p class="iconfont s1">&#xe884;购物车</p>

2. 类名形式（常用）

i class="iconfont icon-ditudingwei s1"></i>

    <i class="iconfont icon-gouwu s1"></i>

总结

以上就是今天要讲的内容，本文仅仅简单介绍了clear的使用以及阿里图标字体库的简单使用，就写到这儿吧，Bonsoir~

Bonsoir777

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS——清除浮动元素对当前元素所产生的影响

清除浮动元素对当前元素所产生影响的方法
复制链接

扫一扫

专栏目录