Loading... ## 知识点 1、在元素的前面添加内容 2、清除浮动 ## Demo   ## 代码 ```html <!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="https://lula.fun/go/YmFpZGkuY29t" target="_blank" >百度</a> <!-- 清除浮动 --> <div class="box clearfix"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="box2">box2</div> </body> </html> ``` #### 关于用div清除浮动的代码演示 <div class="preview"> <div class="post-inser post box-shadow-wrap-normal"> <a href="https://lula.fun/721.html" target="_blank" class="post_inser_a no-external-link"> <div class="inner-image bg" style="background-image: url(https://lula.fun/usr/uploads/2019/04/319572045.png);background-size: cover;"></div> <div class="inner-content" > <p class="inser-title">浮动带来的问题以及解决方法</p> <div class="inster-summary text-muted"> 知识点浮动带来的问题:可能会影响后面的布局以及解决方法:用完浮动后,清除浮动示例浮动示例去掉main部分的高度限制... </div> </div> </a> <!-- .inner-content #####--> </div> <!-- .post-inser ####--> </div> 文章名: 《伪元素》 本文链接:https://lula.fun/771.html 除特别注明外,文章均由 噜啦 原创  原创文章 转载时请注明 出处 以及文章链接 Last modification:November 2nd, 2019 at 01:43 pm © 允许规范转载 Support 如果觉得我的文章对你有用,请随意赞赏 ×Close Appreciate the author Sweeping payments