知识点

1、在元素的前面添加内容
2、清除浮动

Demo

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            /* 在内容之后插入 content里面的值 */
            a::after{
                content: "搜索一下";
                color: red;
                
            }
            /* 在内容之前插入 content里面的内容 */
            a::before{
                content: "iMoe";
                color: orange;
            }
            
            /* 另一个作用 清除浮动 */
            .box{
                width: 300px;
            }
            
            .left{
                width: 100px;
                height: 100px;
                background-color: red;
                float: left;
            }
            
            .right{
                width: 200px;
                height: 100px;
                background-color: green;
                float: right;
            }
            
            
            .box2{
                width: 500px;
                height: 100px;
                background-color: black;
            }
            
            
            .clearfix:after{
                /* 内容为小数点 */
                content: ".";
                /* 转化为块级元素 */
                display: block;
                height: 0;
                /* 内容隐藏 */
                visibility: hidden;
                /* 清除浮动 */
                clear: both;
            }
            
        </style>
        
    </head>
    <body>
        <a href="baidi.com">百度</a>
        
        <!-- 清除浮动 -->
        <div class="box clearfix">
            <div class="left">Left</div>
            <div class="right">Right</div>
        </div>
        <div class="box2">box2</div>
        
    </body>
</html>

关于用div清除浮动的代码演示

浮动带来的问题以及解决方法

知识点浮动带来的问题：可能会影响后面的布局以及解决方法：用完浮动后，清除浮动示例浮动示例去掉main部分的高度限制...

最后修改：2019 年 11 月 02 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏