备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

CSS布局：浮动 (结构伪类选择器、伪元素、标准流、浮动、清除浮动)

2023-09-12 38
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： CSS布局：浮动 (结构伪类选择器、伪元素、标准流、浮动、清除浮动)

CSS布局：浮动

Date: September 7, 2022

Summary: 结构伪类选择器、伪元素、标准流、浮动、清除浮动 （浮动待 二刷 ）


◆ 能够使用 结构伪类选择器 在HTML中选择元素

◆ 能够说出 标准流 元素的布局特点

◆ 能够说出 浮动元素 的特点

◆ 能够使用浮动完成 小米模块布局案例

◆ 能够说出 清除浮动 的目的，并能够使用 清除浮动的方法


结构伪类选择器

1.作用与优势：

  1.作用：根据元素在HTML中的结构关系查找元素

  2.优势：减少对于HTML中类的依赖，有利于保持代码整洁

  3.场景：常用于查找某父级选择器中的子元素

2.选择器


选择器                                               说明

E:fist-child{}               匹配父元素中的第一个子元素，并且是E元素

E:last-child{}               匹配父元素中最后一个元素，并且是E元素

E:nth-child(n){}        匹配父元素中第n个子元素，并且是E元素

E:nth-last-child(n){} 匹配父元素中倒数第n个子元素，并且是E元素


n的注意点：


1.n为：0、1、2、3、4、5、6、……

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


功能          公式

偶数         2n、even

奇数       2n+1、2n-1、odd

找到前5个      -n+5

找到从第5个往后 n+5


Code：

/* ** 偶数 */
/* li:nth-child(2n) { */
    /* *** 奇数 */
/* li:nth-child(2n+1) { */
    /* 找到前3个 */
/* li:nth-child(-n+3) { */
    /* *** 4的倍数 */
/* li:nth-child(4n) {
    background-color: green;
} */

（拓展）结构伪类选择器的易错点


问题：在下列案例中，如果需要找到第一个a标签，如何去查找？

e5c3a1ec3ff1133453411a12cc934110.png

Code：

li:first-child a:nth-child(3){
    color: red;
}

（了解）nth-of-type结构伪类选择器


选择器：


选择器                               说明

E:nth-of-type(n){} 只在父元素的同类型（E）子元素范围中，匹配第n个


Code：

<!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>
        /* 第一个li里面的a */
        li:first-child a {
            /* background-color: green; */
            color: red;
        }
    </style> -->
    <style>
        /* 找到第一个li 里面的  第三个a  设置文字颜色是红色 */
        li:first-child a:nth-child(3) {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="#">这是第1个li里面的a1</a>
            <a href="#">这是第1个li里面的a2</a>
            <!-- 选中第三个a -->
            <a href="#">这是第1个li里面的a3</a>
            <a href="#">这是第1个li里面的a4</a>
            <a href="#">这是第1个li里面的a5</a>
        </li>
        <li><a href="#">这是第2个li里面的a</a></li>
        <li><a href="#">这是第3个li里面的a</a></li>
        <li><a href="#">这是第4个li里面的a</a></li>
        <li><a href="#">这是第5个li里面的a</a></li>
        <li><a href="#">这是第6个li里面的a</a></li>
        <li><a href="#">这是第7个li里面的a</a></li>
        <li><a href="#">这是第8个li里面的a</a></li>
    </ul>
</body>
</html>

区别：


• :nth-child → 直接在所有孩子中数个数


• :nth-of-type → 先通过该 类型 找到符合的一堆子元素，然后在这一堆子元素中数个数


伪元素

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


一般来说是一些不重要的图片


区别：


1.元素：HTML 设置的标签

2.伪元素：由 CSS 模拟出的标签效果


种类：


伪元素                          作用

::before 在父元素内容的最前添加一个伪元素

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


Code:

<!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>
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        .father::before {
            /* 内容 */
            /* content属性必须添加, 否则伪元素不生效 */
            content: 'llllllllllllll';
            color: green;
            /* width: 100px;
            height: 100px;
            background-color: blue; */
            /* 默认是行内元素, 宽高不生效 */
            display: block;
        }
        .father::after {
            content: '大米';
        }
    </style>
</head>
<body>
    <!-- 伪元素 通过css创建标签, 装饰性的不重要的小图 -->
    <!-- 找父级, 在这个父级里面创建子级标签 -->
    <div class="father">爱</div>
    <!-- 老鼠爱大米 -->
</body>
</html>

效果：

6baf416c038c9f1312e16318ba446e10.png

注意点：

1.必须设置content属性才能生效

2.伪元素默认是行内元素

79504383d6e90658f77a0d0c479b4751.png

小结：


伪元素的必加属性是？


content属性


伪元素创建出来后默认的显示模式是？


行内元素


标准流

标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以


何种方式排列元素


常见标准流排版规则：


1.块级元素：从上往下，垂直布局，独占一行

2.行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行


浮动

1.浮动的作用

2.浮动的代码

3.浮动的特点

4.浮动的案例


1.1 浮动的作用


早期的作用：图文环绕

71dd33e3f029f38f859025c8b942e9dd.png

现在的作用：网页布局


场景：让垂直布局的盒子变成水平布局，如：一个在左，一个在右

484483e32f4cf7386d1680810bb23f51.png


2.1 浮动的代码


属性名：float


属性值：


属性名             效果

left                  左浮动

right           有浮动


例子：


浮动的作用： 可以让两块在一行排


Code：


没有采用浮动：


<!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>
        div {
            /* 浏览器解析行内块或行内标签的时候, 如果标签换行书写会产生一个空格的距离 */
            display: inline-block;
            width: 100px;
            height: 100px;
        }
        .one {
            background-color: pink;
        }
        .two 
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
</body>
</html>

采用浮动：

<!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>
        /* img {
            float: left;
        } */
        div {
            width: 100px;
            height: 100px;
        }
        .one {
            background-color: pink;
            float: left;
        }
        .two {
            background-color: skyblue;
            /* flr */
            /* float: right; */
            float: left;
        }
    </style>
</head>
<body>
    <!-- 1. 图文环绕 -->
    <!-- <img src="./images/1.jpg" alt=""-->
    <!-- 2. 网页布局: 块在一行排列 -->
    <div class="one">one</div>
    <div class="two">two</div>
</body>
</html>

效果对比：

892674f22c0f41c87e2d0213eb5c5d70.png


3.1 浮动的特点


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


相当于从地面飘到了空中

858c84651ab72afad3e6d81c44f3d8a6.png

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


2.浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

  1.如图所示，后面的浮动元素会被前面覆盖


3.浮动元素有特殊的显示效果

   一行可以显示多个

  可以设置宽高


注意点：

浮动的元素不能通过text-align:center或者margin:0 auto


小结：

浮动元素的特点有哪些？


1.浮动元素会脱标，在标准流中不占位置

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

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

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


浮动的案例


（案例）网页布局案例


需求：使用浮动，完成设计图中布局效果

47be13adcef90a3785e3743d5a7453e5.png

对于这种，我们一般需要三个标签，一个父级，两个子集


先做一个版心：

.content{
        width: 1226px;
        height: 460px;
        background-color: green;
        margin: 0 auto;
 }

再做左右两块，这里得用float，否则会分成两行排

.content .left{
            float: left;
            width: 234px;
            height: 460px;
            background-color: #ffa500;
        }
        .content .right{
                /* 注意：这里floatleft也行，贴着右边一个 */
            float: right;
            width: 992px;
            height: 460px;
            background-color: #87ceeb;
        }

总结一下CSS的书写顺序：

/* 
  CSS书写顺序: 浏览器执行效率更高
    1. 浮动 / display
    2. 盒子模型: margin border padding 宽度高度背景色
    3. 文字样式
*/

（案例）小米模块案例


需求：使用浮动，完成设计图中布局效果

7fafd1f0413b1ab1691141de5563f845.png

实现顺序：


0 预处理：

*{
    margin: 0;
    padding: 0;
}

制作版心

.box{
    margin: 0 auto;
    width: 1226px;
    height: 614px;
    background-color: pink;
}

1.制作左右大板块

2.制作右边8个小版块

  1.通过li构筑

  1. 1.注意要提前清空li的默认样式，即 默认左边有点

     2.设定4n倍数的右间距为0

.right{
    float: right;
    width: 978px;
    height: 614px;
    /* background-color: skyblue; */
}
ul{
    /* 去掉列表的符号 */
    list-style: none;
}
.right li{
    float: left;
    margin-right: 14px;
    margin-bottom: 14px;
    width: 234px;
    height: 300px;
    background-color: #87ceeb;
}
/* 设定4的倍数的li为0 */
.right li:nth-child(4n){
    margin-right: 0;
}

注意：


父级的宽度不够，子集会自动换行

d9a3ec27ad3940135dd9a6409ffe9e2f.png

（案例）网页导航案例


需求：使用浮动，完成设计图中布局效果

858c84651ab72afad3e6d81c44f3d8a6[0].png

Code:


<!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>
        * {
            margin: 0;
            padding: 0;
        }
        .nav {
            margin: 50px auto;
            width: 640px;
            height: 50px;
            background-color: #ffc0cb;
        }
        ul {
            list-style: none;
        }
        .nav li {
            float: left;
        }
        .nav li a {
            /* 1. 浮动 / display */
            /* display: inline-block; */
            display: block;
            /* 2. 盒子模型 */
            width: 80px;
            height: 50px;
            /* background-color: green; */
            /* 3. 文字样式 */
            /* 位置、行高 + 大小、颜色、修饰 */
            text-align: center;
            line-height: 50px;
            color: #fff;
            text-decoration: none;
        }
        .nav li a:hover {
            background-color: green;
        }
    </style>
</head>
<body>
    <!-- 导航 -->
    <div class="nav">
        <ul>
            <li><a href="#">新闻</a></li>
            <li><a href="#">新闻</a></li>
            <li><a href="#">新闻</a></li>
            <li><a href="#">新闻</a></li>
            <li><a href="#">新闻</a></li>
            <li><a href="#">新闻</a></li>
            <li><a href="#">新闻</a></li>
            <li><a href="#">新闻</a></li>
        </ul>
    </div>
</body>
</html>

书写网页导航步骤


1.清除默认的margin和padding


2.找到ul，去除小圆点


3.找到li标签，设置浮动让li一行中显示


4.找到a标签，设置宽高 → a标签默认是行内元素，默认不能设置宽高？？


   方法一：给a标签设置 display : inline-block


   方法二：给a标签设置 display : block


   方法三：给a设置 float : left


清除浮动

学习路径：


1.清除浮动的介绍

2.清除浮动的方法


1.1 清除浮动的介绍


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


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


问题：


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


Code:


<!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>
        .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;
        }
    </style>
</head>
<body>
    <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

效果：

1e3fa27fbd8b89c3f37fecfc69ab02e9.png

原因：


子元素浮动后脱标 → 不占位置


目的：


需要父元素有高度，从而不影响其他网页元素的布局


2.1 清除浮动的方法

① 直接设置父元素高度


特点：


优点：简单粗暴，方便


缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块

b0ac2e1bb8745fc35ed4ae0981b46c9e.png

② 额外标签法


Code :

.clearfix {
    /* 清除左右两侧浮动的影响 */
    clear: both;
}

操作：


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


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


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


③ 单伪元素清除法 （工作中常用）


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

e0a0cf26ca478f2b0b8086e52e084555.png

    注意1：伪元素清除法在项目开始前会准备好，不用背
    注意2：②添加的两行是为了解决浏览器兼容性问题

特点：


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


谈谈个人对这个的理解：


单伪元素标签 指用 伪标签 的方式，默认在 clearfix 类的 末尾添加清除浮动的功能


从而减少添加 额外添加标签，以达到代码简约的目的

67e4cfa5edaf3332bd2d26fff6597031.png

d7d55693f118d82a4a94ce9eb184fe59.png

④ 双伪元素清除法


总结：


外边距（解决塌陷问题）以及浮动问题都可以用 这个方法


操作：

e1cfd17ee8e6bef1a9c452a4270bab10.png

特点：


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


Code :

/*  
    .clearfix::before 作用: 解决外边距塌陷问题
    外边距塌陷: 父子标签, 都是块级, 子级加margin会影响父级的位置
*/
/* 清除浮动 */
.clearfix::before,
.clearfix::after {
  content: '';
  display: table;
}
/* 真正清除浮动的标签 */
.clearfix::after {
  /* content: '';
  display: table; */
  clear: both;
}

解决效果：

851e159f4a9dbd97a24d68be3a8aefa1.png

⑤ 给父元素设置overflow : hidden


Code:

.top {
    margin: 0 auto;
    width: 1000px;
    /* height: 300px; */
    background-color: pink;
    **overflow: hidden;**
}

操作：

1.直接给父元素设置 overflow : hidden


特点：

优点：方便


小结：


清除浮动的方法有哪些？


1.直接设置父元素高度

2.额外标签法

3.单伪元素清除法

4.双伪元素清除法

5.给父元素设置overflow : hidden


（拓展补充）BFC的介绍


块格式化上下文（Block Formatting Context）：BFC


是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。


创建BFC方法：

1.html标签是BFC盒子

2.浮动元素是BFC盒子

3.行内块元素是BFC盒子

4.overflow属性取值不为visible。如：auto、hidden…

5.……


BFC盒子常见特点：

1.BFC盒子会默认包裹住内部子元素（标准流、浮动）→ 应用：清除浮动

2.BFC盒子本身与子元素之间不存在margin的塌陷现象 → 应用：解决margin的塌陷

3.……


总结：


◆ 能够使用 结构伪类选择器 在HTML中选择元素


◆ 能够说出 标准流 元素的布局特点


◆ 能够说出 浮动元素 的特点


◆ 能够使用浮动完成 小米模块布局案例


◆ 能够说出 清除浮动 的目的，并能够使用 清除浮动的方法


文章标签：
前端开发
关键词：
CSS伪元素
CSS选择器
CSS结构
CSS布局
CSS伪类
CaptainDrake
目录
相关文章
sunrr
|
22天前
|
XML 前端开发 数据格式
css核心组成部分包括选择器、属性和值。
【4月更文挑战第5天】css核心组成部分包括选择器、属性和值。
sunrr
18 7
微芒不朽
|
10天前
|
前端开发
【CSS进阶】巧用伪元素before和after制作绚丽效果（下）
【CSS进阶】巧用伪元素before和after制作绚丽效果（下）
微芒不朽
11 0
时雨h
|
11天前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记（十）
CSS选择器 前端开发入门笔记（十）
时雨h
19 1
sunrr
|
13天前
|
前端开发
css的基础结构
【4月更文挑战第14天】css的基础结构
sunrr
19 6
Goodluck-dys
|
24天前
|
前端开发
css伪类伪元素都有哪些区别是什么
css伪类伪元素都有哪些区别是什么
Goodluck-dys
9 0
N..
|
1月前
|
前端开发 UED
CSS选择器
CSS选择器
N..
9 0
N..
|
1月前
|
前端开发 UED
CSS伪类和伪元素
CSS伪类和伪元素
N..
7 0
sunrr
|
1月前
|
前端开发
css选择器
css选择器【2月更文挑战第26天】
sunrr
25 12
希屿风
|
1月前
|
前端开发 JavaScript 开发者
前端的CSS选择器
前端的CSS选择器
希屿风
23 1
人不走空
|
1月前
|
前端开发 开发者
掌握CSS中的常见选择器
掌握CSS中的常见选择器
人不走空
34 0