伪类元素清除浮动

最新推荐文章于 2024-05-03 11:08:18 发布

lwq_qqq

最新推荐文章于 2024-05-03 11:08:18 发布

阅读量2.9k

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/m0_48180834/article/details/119360407

版权

::after 伪元素可用于在元素内容之后插入一些内容（之前不存在的）。

下面通过一个例子来理解伪元素如何清除浮动：

html代码：显示出来的效果就是“山西农业大学欢迎您”是一行，“学校主页”是一行

    <div class="header">
        <!-- 第一行 -->
        <div class="header_top">
          <!-- 容器居中显示 -->
          <div class="wrapper">
            <div class="left">山西农业大学欢迎您</div>
            <div class="right">学校主页</div>
          </div>
        </div>
        <!-- / 第一行 -->
    </div>

没加样式的效果

接下来进行添加效果，使他们处于同一行，并且“山西农业大学欢迎您”在该左侧，“学校主页”在该行右侧。这里我们首先想到的是进行浮动，前者进行左浮动，后者进行右浮动，并且加个背景色看看效果。这里没有显示效果



        .header>.header_top{
            background-color:#028b39;
            color: #fff;
        }
        .wrapper{
          width: 100%;
        }  
        .left,.right {
            line-height: 3em;
        }     
        .left{
            float:left;
            padding-left: 25px;
        }
        .right{
            float: right;
            padding-right: 25px;
        }

其实这块是存在效果的，知识脱离了文档流，父元素就没有了支撑，因此不会显示出校可视的效果，此时就需要想到的是用伪类元素来充当内容，填充父元素，并且消除浮动。

css代码中添加：

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

新添加的伪类元素以块展示，内容设为空，但占据一定的位置，clear:both;表示的是清除左右两边的浮动，即谁设置了clear：both属性，谁的左右边都不允许存在浮动的元素。

显示效果：

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .header>.header_top{
            background-color:#028b39;
            color: #fff;
        }
        .wrapper{
          width: 100%;
        }
        .wrapper::after{
            display:  block;
            content:'';
            clear:both;
        }
        .left,.right {
            line-height: 3em;
        }
        .left{
            float:left;
            padding-left: 25px;
        }
        .right{
            float: right;
            padding-right: 25px;
        }
    </style>
</head>
<body>
    <div class="header">
        <!-- 第一行 -->
        <div class="header_top">
          <!-- 容器居中显示 -->
          <div class="wrapper">
            <div class="left">山西农业大学欢迎您</div>
            <div class="right">学校主页</div>
          </div>
        </div>
        <!-- / 第一行 -->
    </div>
</body>
</html>

lwq_qqq

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
伪类元素清除浮动

::after伪元素可用于在元素内容之后插入一些内容（之前不存在的）。下面通过一个例子来理解伪元素如何清除浮动：html代码：显示出来的效果就是“山西农业大学欢迎您”是一行，“学校主页”是一行 <div class="header">  <div class="header_top">  <div class.
复制链接

扫一扫