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标签，如何去查找？

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>

效果：

注意点：

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

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

小结：

伪元素的必加属性是？

content属性

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

行内元素

标准流

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

何种方式排列元素

常见标准流排版规则：

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

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

浮动

1.浮动的作用

2.浮动的代码

3.浮动的特点

4.浮动的案例

1.1 浮动的作用

早期的作用：图文环绕

现在的作用：网页布局

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

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>

效果对比：

3.1 浮动的特点

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

相当于从地面飘到了空中

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

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

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

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

一行可以显示多个

可以设置宽高

注意点：

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

小结：

浮动元素的特点有哪些？

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

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

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

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

浮动的案例

（案例）网页布局案例

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

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

先做一个版心：

.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. 文字样式
*/

（案例）小米模块案例

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

实现顺序：

0 预处理：

*{
    margin: 0;
    padding: 0;
}

制作版心

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

1.制作左右大板块

2.制作右边8个小版块

1.通过li构筑

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;
}

注意：

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

（案例）网页导航案例

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

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>

效果：

原因：

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

目的：

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

2.1 清除浮动的方法

① 直接设置父元素高度

特点：

优点：简单粗暴，方便

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

② 额外标签法

Code :

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

操作：

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

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

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

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

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

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

特点：

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

谈谈个人对这个的理解：

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

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

④ 双伪元素清除法

总结：

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

操作：

特点：

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

Code :

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

解决效果：

⑤ 给父元素设置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布局：浮动 (结构伪类选择器、伪元素、标准流、浮动、清除浮动)