AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2023-09-12 88
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
目录
相关文章
gudanhero2018
|
2月前
|
前端开发
CSS:高级选择器
CSS:高级选择器
gudanhero2018
42 1
gudanhero2018
|
2月前
|
前端开发 JavaScript
CSS：基础选择器
CSS：基础选择器
gudanhero2018
47 1
那年春天
|
23天前
|
前端开发 JavaScript UED
深入理解与应用 CSS 伪类选择器
【10月更文挑战第23天】通过以上对 CSS 伪类选择器的深入探讨，我们可以更好地理解和应用它们，为网页设计和开发带来更丰富、更灵活的样式效果。同时，要注意在实际应用中根据具体情况合理选择和使用伪类选择器，以达到最佳的设计效果和用户体验。
那年春天
31 2
html的七十二变
|
1月前
CSS3 新增伪类有那些
CSS3 引入了多种新伪类，增强了样式控制的灵活性。新增的结构伪类如 `:nth-child(n)` 和 `:first-of-type` 可以根据元素的位置和类型进行选择；状态伪类如 `:enabled` 和 `:checked` 则根据元素的状态进行选择；动态伪类如 `:hover` 和 `:active` 则基于用户的交互行为。这些伪类让样式定制更加多样和强大。
html的七十二变
41 6
周一同学Zelina
|
2月前
|
前端开发 JavaScript 容器
谁动了我的选择器？深入理解CSS选择器优先级
该文章详细解释了CSS选择器的工作原理，包括不同种类选择器的权重计算规则，并通过实例说明了如何解决样式冲突问题，确保所需的样式能够正确应用到目标元素上。
周一同学Zelina
74 7
邹荣乐
|
1月前
|
前端开发
运用CSS伪类与属性，巧妙实现背景图片旋转效果
运用CSS伪类与属性，巧妙实现背景图片旋转效果
邹荣乐
33 0
何雨晨
|
1月前
|
前端开发
CSS常见的选择器
CSS常见的选择器
何雨晨
18 0
时雨h
|
6月前
|
Web App开发 XML 前端开发
CSS中的非布局样式+CSS布局 前端开发入门笔记（十一）
CSS中的非布局样式+CSS布局 前端开发入门笔记（十一）
时雨h
76 0
小珞珞
|
前端开发
网站开发之DIV+CSS简单布局网站入门篇（五）
这篇文章主要介绍如何使用DIV和CSS简单布局一个网站的首页，通常将网站划分为顶部（Logo、导航条）、中部（页面主要内容、左右栏目）、底部（制作方介绍、超链接）。这是非常基础的一篇引入性文章，采用案例的方式进行介绍的，希望对你有所帮助。运行结果如下图所示：main.html主页面代码：主要通过di
小珞珞
3626 0
taoland
|
前端开发 容器 JavaScript
CSS Grid布局入门
相信大家都比较熟悉flex布局了，最近有空研究了波grid布局，感觉虽然兼容性还不是太高，应用不是太普遍，但是功能非常强大。未来应该是grid+flex为主流，grid是二维布局，很灵活，适合整体构架，而flex是一维布局，适合处理局部细节。
taoland
1176 0

热门文章

最新文章

  • 1
    CSS 居中方法总结
  • 2
    纯CSS3实现宽屏二级下拉菜单
  • 3
    CSS3实现多样的边框效果
  • 4
    CSS3-实现单选框radio的小动画
  • 5
    使用 CSS3 实现 3D 图片滑块效果【附源码下载】
  • 6
    CSS3实现时间轴效果
  • 7
    【HTML+CSS+JS】前端三剑客实现3D旋转照片墙
  • 8
    05.javascript访问CSS
  • 9
    CSS3中的选择器
  • 10
    Css:背景色透明，内容不透明之终极方法！兼容所有浏览器
  • 1
    使用CSS中的cursor属性值，常用的可设置参数，以及其他16中参数值的使用场景和示例代码
    72
  • 2
    技术心得：xpath、CSS定位方法
    46
  • 3
    【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
    164
  • 4
    CSS【详解】对齐 （含文本垂直对齐，文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐，图片和文本对齐等）
    76
  • 5
    CSS【详解】布局 display （ 含 flex 布局，grid 布局，table 布局，float 布局，响应式布局 等）
    142
  • 6
    CSS【详解】定位 position （静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky）
    51
  • 7
    CSS【详解】长度单位 （ px，%，em，rem，vw，vh，vmin，vmax，ex，ch ）
    74
  • 8
    CSS 【详解】样式选择器（含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器）
    159
  • 9
    使用HTML和CSS创建响应式表格
    166
  • 10
    常见的css优化方案都有那些
    51

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • CSS基础教程
    • 下一篇
    无影云桌面