css伪类选择器清除浮动...

努力的小白o(^▽^)o

已于 2023-07-21 11:22:30 修改

阅读量383

点赞数

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

于 2023-07-21 11:17:54 首次发布

本文链接：https://blog.csdn.net/m0_61102549/article/details/131809838

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

结构伪类选择器

css的书写顺序：浏览器执行效率更高

2.选择器

伪元素（一般页面中的非主体内容可以使用伪元素）

清除浮动的方法---方法一----额外标签法

方法二：单伪元素清除法

方法三：双伪元素清除法

方法四：给父元素设置overflow：hidden

结构伪类选择器

只要是选择器就是找标签用的

css的书写顺序：浏览器执行效率更高

1.浮动/display

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

3.文字样式

1.作用与优势
作用：根据元素在HTML中的结构关系查找元素
优势：减少对于HTML中的类的依赖，有利于保持代码整洁
场景：常用于查找某父级选择器中的子元素

2.选择器

选择器	说明
E:first-child{}	匹配父元素中第一个子元素，并且是RE元素
E:last-child{}	匹配父元素中最后一个子元素，并且是E元素
E:nth-child(n){}	匹配父元素中第n个子元素，并且是E元素
E:nth-last-child(n){}	匹配父元素中daoshudin个子元素，并且是E元素

注意:1.n为：0、1、2...

2.通过n可以组成常见公式

功能	公式
偶数	2n、even
奇数	2n+1、2n-1、odd
找到前5个	-n+5
找到从第5个往后	n+5

伪元素（一般页面中的非主体内容可以使用伪元素）

元素：HTML设置的元素

伪元素：由css模拟出的标签效果（装饰性的不重要的），是一种标签，且是行内。

种类：

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

通过伪元素给父类添加文字：

        /* 通过伪元素加入内容 */
        .father::before{
            content: '老鼠';
        }
        .father::after{
            content: '大米';
        }

注意：要想用伪元素，必须要有content；

标准流

标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则（块级元素、行内元素），规定了应该以何种方式排列元素

浮动

1.浮动的作用：

早期作用：图文环绕

现在作用：网页布局

浏览器在解析行内块和行内标签的时候，若代码换行浏览器会显示一个空格的间距

例如：两个div标签转行内时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            display: inline-block;
            width: 300px;
            height: 300px;
        }
        .one{
            background-color: pink;
        }
        .two{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
</body>
</html>

运行结果如图浏览器会显示一个空格的间距：原因为两个div代码不在一行导致

通过浮动可以让块标签完美的在一行排

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* img{
            float: left;
        } */
        div{
            width: 100px;
            height: 100px;
        }
        .one{
            background-color: pink;
            float: left;
        }
        .two{
            background-color: green;
            /* float: right; */
            float: left;
        }

    </style>
</head>
<body>
    <!-- <img src="./屏幕截图 2023-07-17 163055.png" alt=""> -->
    <!-- 芙蓉姐夫被人攻击他人内分泌科不过v人家开发火热减肥覅u剋就返回而我国发红包的厄瑞夫和日韩非本人复活节
    芙蓉姐夫被人攻击他人内分泌科不过v人家开发火热减肥覅u剋就返回而我国发红包的厄瑞夫和日韩非本人复活节
    芙蓉姐夫被人攻击他人内分泌科不过v人家开发火热减肥覅u剋就返回而我国发红包的厄瑞夫和日韩非本人复活节
    芙蓉姐夫被人攻击他人内分泌科不过v人家开发火热减肥覅u剋就返回而我国发红包的厄瑞夫和日韩非本人复活节芙蓉姐夫被人攻击他人内分泌科不过v人家开发火热减肥覅u剋就返回而我国发红包的厄瑞夫和日韩非本人复活节芙蓉姐夫被人攻击他人内分泌科不过v人家开发火热减肥覅u剋就返回而我国发红包的厄瑞夫和日韩非本人复活节芙蓉姐夫被人攻击他人内分泌科不过v人家开发火热减肥覅u剋就返回而我国发红包的厄瑞夫和日韩非本人复活节芙蓉姐夫被人攻击他人内分泌科不过v人家开发火热减肥覅u剋就返回而我国发红包的厄瑞夫和日韩非本人复活节芙蓉姐夫被人攻击他人内分泌科不过v人家开发火热减肥覅u剋就返回而我国发红包的厄瑞夫和日韩非本人复活节芙蓉姐夫被人攻击他人内分泌科不过v人家开发火热减肥覅u剋就返回而我国发红包的厄瑞夫和日韩非本人复活节芙蓉姐夫被人攻击他人内分泌科不过v人家开发火热减肥覅u剋就返回而我国发红包的厄瑞夫和日韩非本人复活节芙蓉姐夫被人攻击他人内分泌科不过v人家开发火热减肥覅u剋就返回而我国发红包的厄瑞夫和日韩非本人复活节芙蓉姐夫被人攻击他人内分泌科不过v人家开发火热减肥覅u剋就返回而我国发红包的厄瑞夫和日韩非本人复活节芙蓉姐夫被人攻击他人内分泌科不过v人家开发火热减肥覅u剋就返回而我国发红包的厄瑞夫和日韩非本人复活节芙蓉姐夫被人攻击他人内分泌科不过v人家开发火热减肥覅u剋就返回而我国发红包的厄瑞夫和日韩非本人复活节芙蓉姐夫被人攻击他人内分泌科不过v人家开发火热减肥覅u剋就返回而我国发红包的厄瑞夫和日韩非本人复活节芙蓉姐夫被人攻击他人内分泌科不过v人家开发火热减肥覅u剋就返回而我国发红包的厄瑞夫和日韩非本人复活节芙蓉姐夫被人攻击他人内分泌科不过v人家开发火热减肥覅u剋就返回而我国发红包的厄瑞夫和日韩非本人复活节芙蓉姐夫被人攻击他人内分泌科不过v人家开发火热减肥覅u剋就返回而我国发红包的厄瑞夫和日韩非本人复活节芙蓉姐夫被人攻击他人内分泌科不过v人家开发火热减肥覅u剋就返回而我国发红包的厄瑞夫和日韩非本人复活节芙蓉姐夫被人攻击他人内分泌科不过v人家开发火热减肥覅u剋就返回而我国发红包的厄瑞夫和日韩非本人复活节芙蓉姐夫被人攻击他人内分泌科不过v人家开发火热减肥覅u剋就返回而我国发红包的厄瑞夫和日韩非本人复活节芙蓉姐夫被人攻击他人内分泌科不过v人家开发火热减肥覅u剋就返回而我国发红包的厄瑞夫和日韩非本人复活节 -->

    <div class="one">one</div>
    <div class="two">two</div>
</body>
</html>

2.浮动特点：

1.浮动元素会脱离标准流（简称：脱标），在标准流中不占位置

2.浮动元素比标准流高半个级别，可以覆盖标准流中的元素

3.浮动找浮动，下一个浮动元素会在上一个浮动元素后边左右移动

4.浮动元素有特殊的显示效果：一行可以显示多个可以设置宽高

浮动：在一行排列，宽高生效浮动后的标签具备行内块特点

注意：浮动元素不能通过text-align：center或者margin：0 auto

清除浮动

含义：清除浮动带来的影响

影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素

什么时候会受浮动的影响呢？

父子级标签，自己浮动，父级没有高度，后面的标准流盒子会受到影响，显示到上面的位置。

父级不浮动图：

清除浮动的方法---方法一----额外标签法

操作：1.在父元素内容的最后添加一个块级元素

2.给添加的块级元素设置clear：both

特点：

缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

<body>
    <div class="top">
        <div class="a">left</div>
        <div class="b">right</div>
        <!-- 在父元素内容的最后添加一个块级元素 -->
        <div class="clearfix"></div>
    </div>
</body>

/* 在style中给添加的块级元素设置clear：both */
        .clearfix{
            clear:both;
        }

方法二：单伪元素清除法

操作：用伪元素替代了额外标签

基本写法：

.clearfix：：after{
            content: '';
            /* 因为伪元素添加的是行内的，要求块 */
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="top clearfix">
        <div class="a">left</div>
        <div class="b">right</div>
       <!-- 通过css添加标签 -->

    </div>
</body>

补充写法：

.clearfix：：after{
            content: '';
            /* 因为伪元素添加的是行内的，要求块 */
            display: block;
            clear: both;
            /* 补充代码 为了兼容性*/
            height: 0;
            /* 隐藏功能 */
            visibility: hidden;
        }

单伪元素清除浮动和额外标签法原理是一样的

优点：项目中使用，直接给标签加类即可清除浮动

方法三：双伪元素清除法

操作：

/*.clearfix::before主要解决外边距塌陷问题*/
/*外边距塌陷：父子级标签，都是块级，自己加margin会影响父级的位置*/
.clearfix::before,
.clearfix::after{
    content:'';
/*把显示模式转成table表格型*/
    display:table;
}
.clearfix::after{
    clear:both;
}

/*真正清除浮动的标签*/
.clearfix::after{
   clear:both;
}

方法四：给父元素设置overflow：hidden

操作：直接给父元素设置overflow：hidden

优点：方便

努力的小白o(^▽^)o

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
css伪类选择器清除浮动...

是浏览器在渲染显示网页内容时默认采用的一套排版规则（块级元素、行内元素），规定了应该以何种方式排列元素。父子级标签，自己浮动，父级没有高度，后面的标准流盒子会受到影响，显示到上面的位置。伪元素：由css模拟出的标签效果（装饰性的不重要的），是一种标签，且是行内。3.浮动找浮动，下一个浮动元素会在上一个浮动元素后边左右移动。如果子元素浮动了，此时子元素不能撑开标准流的块级父元素。浮动元素比标准流高半个级别，可以覆盖标准流中的元素。操作：1.在父元素内容的最后添加一个块级元素。
复制链接

扫一扫