5.CSS浮动

作者: 奶油裙子 | 来源:发表于2023-04-19 12:04 被阅读0次

5.CSS定位
2021百度前端面试题一面
js面试题
浮动、清除浮动、闭合浮动
day03
day03
5.CSS实战技巧
5.CSS用户界面样式
day01
浮动与清除浮动

一、结构伪类选择器

目标：能够使用结构伪类选择器在HTML中定位元素

1、作用与优势：

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

2、选择器

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

<style>
        /* 选中第一个 */
        li:first-child{
            background-color: green;
        }
        /* 最后一个 */
        li:last-child{
            background-color: green;
        }
        /* 选中第三个 */
        li:nth-child(3){
            background-color: red;
        }
        /* 倒数第XX个 */
        li:nth-last-child(2){
            background-color: blue;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

➢ n的注意点：

n为：0、1、2、3、4、5、6、……
通过n可以组成常见公式

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

    <style>
        /* 偶数 */
        /* li:nth-child(2n){
            background-color: green;
        } */
        /* 奇数 */
        /* li:nth-child(2n+1){
            background-color: green;
        } */
        /* 选中前三个 */
        /* li:nth-child(-n+3){
            background-color: green;
        } */
        /* 4的倍速 */
        li:nth-child(4n){
            background-color:green;
        }
    </style>
</head>
<body>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>
</body>

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

(1)选择器：

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

(2)区别：
• :nth-child → 直接在所有孩子中数个数
• :nth-of-type → 先通过该类型找到符合的一堆子元素，然后在这一堆子元素中数个数

二、伪元素

目标：能够使用伪元素在网页中创建内容
(1)伪元素：一般页面中的非主体内容可以使用伪元素
(2)区别：
a.元素：HTML 设置的标签
b. 伪元素：由 CSS 模拟出的标签效果
(3)种类：

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

(4)注意点：
a.必须设置content属性才能生效
b.伪元素默认是行内元素

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

运行结果：

三、标准流

目标：能够认识标准流的默认排布方式及其特点
(1)标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
(2)常见标准流排版规则：
<1>块级元素：从上往下，垂直布局，独占一行
<2>行内元素或行内块元素：从左往右，水平布局，空间不够自动折行

四、浮动

目标：能够认识使用浮动的作用，了解浮动的特点
**浏览器解析行内块或行内标签的时候，如果标签换行书写会产生距离 **

<style>
        div{
            /* 浏览器解析行内块或行内标签的时候，如果标签换行书写会产生距离 */
            display: inline-block;
            width: 100px;
            height: 100px;
        }
        .one{
            background-color: pink;
        }
        .two{
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="one">one</div><div class="two">two</div>
</body>

运行结果：

4.1 浮动的作用

早期作用：图文环绕

<style>
        img{
            float: left;
        }
    </style>
</head>
<body>
    <!-- 1、图文环绕 -->
    <img src="../../rescours/day06/01-案例/images/1.jpg" alt="">
    开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好开心就好
</body>

运行结果：

现在的作用：网页布局

<style>
        div{
            width: 100px;
            height: 100px;
        }
        .one{
            background-color: pink;
            float: left;
        }
        .two{
            background-color: green;
            float:left;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
</body>

运行结果：

4.2 浮动的代码

（1）属性名：float
（2）属性值：

属性名	效果
left	左浮动
right	右浮动

4.3浮动的特点

（1）浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
• 相当于从地面飘到了空中

如：

<style>
        .one{
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
        }
        .two{
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
        .three{
            width: 300px;
            height: 300px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three </div>
</body>

运行结果：

（2）浮动元素比标准流高半个级别，可以覆盖标准流中的元素
（3）浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
当one和two标签都是浮动元素时（浮动的标签顶对齐）

margin-top: 50px;直接加就会有外边距
（4）浮动元素有特殊的显示效果
浮动后的标签具备行内块特点
• 一行可以显示多个
• 可以设置宽高
（5）注意点：
• 浮动的元素不能通过text-align:center或者margin:0 auto（因为有浮动，不能生效--盒子无法水平居中）

4.4CSS书写顺序（浏览器执行效果更高）

（1）浮动/display
（2）盒子模型：margin border padding 宽度高度背景色
（3）文字样式

4.5 综合案例

(1)案例1 网页布局案例

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

<!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;
        }
        .top{
            /* 宽度高度背景色 */
            height: 40px;
            background-color: #333;
        }
        .header{
            width: 1226px;
            height: 100px;
            background-color: #ffc0cb;
            margin: 0 auto;
        }
        .content{
            width: 1226px;
            height: 460px;
            background-color: green;
            margin: 0 auto;
        }
        .left{
            width: 234px;
            height: 460px;
            background-color: #ffa500;
            float: left;
        }
        .right{
            width: 992px;
            height: 460px;
            background-color: #87ceed;
            float: left;
        }
    </style>
</head>
<body>
    <!-- 通栏的盒子：宽度和浏览器宽度一样大 -->
    <div class="top"></div>
    <div class="header"></div>
    <div class="content">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

运行结果：

(2)案例2 小米模块案例

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

<!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;
        }
        .box{
            margin: 0 auto;
            width: 1226px;
            height: 614px;
            background-color:white;
        }
        .left{
            float: left;
            width: 234px;
            height: 614px;
            background-color: #800080;
        }
        .right{
            float: right;
            width: 978px;
            height: 614px;
            background-color: white;
        }
        ul{
            list-style: none;
        }
        .right li{
            float: left;
            margin-right: 14px;
            margin-bottom: 14px;
            width: 234px;
            height: 300px;
            background-color: #87ceeb;
        }
        /* 第4个li和第8个li清楚 */
        .right li:nth-child(4n){
            margin-right: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</body>
</html>

运行结果：

（3）案例3 网页导航案例

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

书写网页导航步骤：

清除默认的margin和padding
找到ul，去除小圆点
找到li标签，设置浮动让li一行中显示
找到a标签，设置宽高 → a标签默认是行内元素，默认不能设置宽高？？
• 方法一：给a标签设置 display : inline-block
• 方法二：给a标签设置 display : block
• 方法三：给a设置 float : lef

<!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: 0 auto;
            width: 640px;
            height: 50px;
            background-color: #ffc0cb;
        }
        ul{
            list-style: none;
        }
        .nav li{
            float: left;
        }
        .nav a{
            /* 1.浮动/display */
            display: inline-block;
            /* 2.盒子模型 */
            width: 80px;
            height: 50px;
            /* 3.文字样式 */
            text-decoration: none;
            text-align: center;
            line-height: 50px;
            color: white;
        }
        .nav li a:hover{
            background-color: green;
        }
    </style>
</head>
<body>
    <!-- nav 导航 -->
    <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>

五、清除浮动

目标：能够认识清除浮动的目的，并且能够使用清除浮动的方法

5.1清除浮动的介绍

（1）含义：清除浮动带来的影响
• 影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
（2）原因：
• 子元素浮动后脱标 → 不占位置
（3）目的：
• 需要父元素有高度，从而不影响其他网页元素的布局

如

5.2 清除浮动的方法 — ① 直接设置父元素高度

特点：
• 优点：简单粗暴，方便
• 缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块

5.3 清除浮动的方法 — ② 额外标签法

操作：

在父元素内容的最后添加一个块级元素
给添加的块级元素设置 clear:both（清楚左右两侧浮动的影响）
➢ 特点：
• 缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

.clearfix{
            clear:both;
        }
    </style>
</head>
<body>
    <!-- 父子级标签，子集浮动，父级没有高度，后面的标准流盒子会受影响，会显示到上面的位置 -->
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
        <div class="clearfix"></div>
    </div>
    <div class="bottom"></div>
</body>

运行结果：

5.4 清除浮动的方法 — ③ 单伪元素清除法

 /* 单伪元素清除浮动 */
        .clearfix::after{
            content: '';
            /* 伪元素添加的标签时行内，要求块 */
            display: block;
            clear: both;
            /* 为了兼容器 */
            height: 0;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <!-- 父子级标签，子集浮动，父级没有高度，后面的标准流盒子会受影响，会显示到上面的位置 -->
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>

5.5清除浮动的方法 — ④ 双伪元素清除

/* 清除浮动 */
        /* clearfix::before 作用：解决外边距塌陷问题 */
        /* 外边距塌陷：父子标签，都是块级（现在转成table，就不会塌陷了），子集加margin会影响父级的位置 */
        .clearfix::before,
        .clearfix::after{
            content: '';
            display: table;
        }
        /* 真正清楚浮动的标签 */
        .clearfix::after{
            clear: both;
        }
    </style>
</head>
<body>
    <!-- 父子级标签，子集浮动，父级没有高度，后面的标准流盒子会受影响，会显示到上面的位置 -->
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>

5.6清除浮动的方法 — ⑤ 给父元素设置overflow : hidden

➢ 操作：

直接给父元素设置 overflow : hidden
➢ 特点：
• 优点：方便

 <style>
        .top{
            margin: 0 auto;
            width: 1000px;
            background-color: pink;
            overflow: hidden;
        }
        .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>