伪元素浮动

qq_59729459

已于 2023-02-20 10:10:07 修改

阅读量78

点赞数

文章标签： css3 前端 css

于 2023-02-19 22:55:26 首次发布

本文链接：https://blog.csdn.net/qq_59729459/article/details/129112733

版权

标签.hover：伪类

：：before 在父元素前添加一个伪元素

：：after 在父元素内容的最后添加一个伪元素

必须设置content属性才可以生效

伪元素默认行内元素

<style>
    .f::before{
       content:  '老鼠';
    }
</style>
<div class="f" >爱</div>

浮动具备行内块模式。脱离了标准流

css书写模式》浏览器执行效率更高

1写浮动

2盒子模型：margin border padding 宽度高度背景色

3文字样式

清除浮动影响

1 直接加高度

2 在父元素后加一个块级元素，并添加clear：both

3 .clearfix：：after{ //类名：：after

content： ' ';

display:block;

clear:both;

visibility:hidden //隐藏

}

4清楚浮动：

.clearfix::before,

.clearfix::after{

content：'';

display：table；

}

.clearfix::after{

clear:both;

}//真正清楚浮动的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .top{
            margin: 0 auto;
            width: 1000px;
            /*height: 300px;*/
            background-color: pink;

        }
        .bottom{
            height: 100px;
            background-color: green;
        }
        .left{
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }
        .right{
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }

//.clearfix::before的作用：解决外边距的塌陷问题

外边距塌陷：父子级标签，都是块级，子级加margin会影响父级的位置//

        .clearfix::before,
        .clearfix::after{
            content :'';
            display: table;
        }
        .clearfix::after{
            clear: both;
        }
        /*.l{*/
        /*    clear: both;*/
        /*}*/
    </style>
</head>
<body>
<div class="top clearfix">
    <div class="left"></div>
    <div class="right"></div>
    <div class="l"></div>
</div>
 <div class="bottom"></div>
</body>
</html>