CSS布局浮动

qq_40832034

已于 2023-02-20 13:19:15 修改

阅读量79

点赞数 1

文章标签： css

于 2022-04-24 14:32:08 首次发布

本文链接：https://blog.csdn.net/qq_40832034/article/details/124369736

版权

前端学习专栏收录该内容

37 篇文章 1 订阅

订阅专栏

本文详细讲解了HTML中的结构伪类选择器（如:nth-child用于定位元素）、伪元素的使用、标准流与浮动在网页布局中的应用，以及清除浮动的各种方法。实例涵盖导航、模块布局和新闻列表，助你理解并掌握CSS布局技巧。

摘要由CSDN通过智能技术生成

一、结构伪类选择器

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

作用：根据元素在HTML中的结构关系查找元素
场景：常用于查找某父级选择器中的子元素

➢ 选择器: 在这里插入图片描述

➢ n的注意点：

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

<style>
        li:nth-child(2n){
            background-color: aqua;
        }
    </style>

在这里插入图片描述
（拓展）结构伪类选择器的易错点
➢ 问题：在下列案例中，如果需要找到第一个a标签，如何去查找？

/* 错误写法 */
li a:first-child{
    color: red;
}
 
/* 正确写法 */
 
li:first-child a{
    color: red;
}

二、伪元素

➢ 伪元素：一般页面中的非主体内容可以使用伪元素
➢ 区别：
1.元素：HTML 设置的标签
2.伪元素：由 CSS 模拟出的标签效果
➢ 种类：
在这里插入图片描述
➢ 注意点：

必须设置content属性才能生效
伪元素默认是行内元素

三、标准流

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

➢ 常见标准流排版规则：
1.块级元素：从上往下，垂直布局，独占一行
2.行内元素或行内块元素：从左往右，水平布局，空间不够自动折行

四、浮动

1、浮动的作用

➢ 早期的作用：图文环绕
➢ 现在的作用：网页布局
• 场景：让垂直布局的盒子变成水平布局，如：一个在左，一个在右
在这里插入图片描述
（都是div标签，块元素，没办法在一行，转行元素会有空隙，用浮动）

2、浮动的代码

➢ 属性名：float
➢ 属性值：
在这里插入图片描述

<style>
        .one{
            width: 30px;
            height: 30px;
            background-color: #f55;
            float:left
        }
        .two{
            width: 30px;
            height: 30px;
            background-color: burlywood;
            float:right
        }
    </style>

<body>
    <div class="one">1</div>
    <div class="two">2</div>
</body>

（效果见上图）

3、浮动的特点

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

在这里插入图片描述
1设置浮动后：

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

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

浮动元素有特殊的显示效果
• 一行可以显示多个
• 可以设置宽高
(浮动后的标签具备行内块的特点)

➢ 注意点：
• 浮动的元素不能通过text-align:center或者margin:0 aut

4、浮动的案例

（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;
        }
        .one{
            height: 40px;
            background-color: #333;  
        }
        .two{
            width: 1226px;
            height: 100px;
            background-color: #ffc0cb;
            margin: 0 auto;
        }
        /* 大盒子，包括3、4，因为他们浮动不能居中 */
        .z{
            width: 1226px;
            height: 460px;
            margin: 0 auto;
            background-color: #ff3;
        }
        .three{ 
            width: 234px;
            height: 460px;
            background-color: #ffa500;
            float: left;
        }
        .four{
            width: 992px;
            height: 460px;
            background-color: #87ceed;
            float: left;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="z">
         <div class="three" ></div>
         <div class="four"></div>
    </div>
</body>
</html>

在这里插入图片描述

注意如果有盒子又需要浮动又需要居中，先用一个大盒子确保居中，里面的盒子负责浮动。

CSS书写顺序浏览器执行效率高
① 放浮动或者display（可以根据是否需要最后放上去）
② 盒子模型：margin、border、padding、宽度高度背景色
③ 文字样式

（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-sizing: border-box;
        }
        .box{
            width: 1226px;
            height: 614px;
            margin: 0 auto;
        }
        .left{
            width: 234px;
            height: 614px;
            background-color: #800080;
            float: left;
        }
        .right{
            width: 978px;
            height: 614px;
            float: right;
        }
        ul{
            list-style: none;
        }
        .right li{
            width: 234px;
            height: 300px;
            background-color: #87ceed;
            float: left;
            margin-right: 14px;
        }

        li:nth-child(-n+4){
            margin-bottom: 14px;
        }
        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>

![在这里插入图片描述](https://img-blog.csdnimg.cn/f00acf612fd04168bc018fe71a999385.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAcXFfNDA4MzIwMzQ=,size_20,color_FFFFFF,t_70,g_se,x_16

（3）网页导航案例

<!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;
            margin: 0 auto;
            box-sizing: border-box;
        }
        .web{
            width: 640px;
            height: 50px;
            background-color: #ffc0cb;
        }
        .web ul{
            list-style: none;
        }
        /* 之所以将宽高加给a而不是li，是因为想让可以点的范围尽可能大 */
        .web ul li{
            float: left;      
        }
        .web ul li a{     
        /*a是行内元素，要转换成行内块，否则不能设置宽高*/
            display: inline-block;

            width: 80px;
            height: 50px;
            line-height: 50px;  
            text-align: center;  

            text-decoration: none; 
            font-size: 16px;
            color:#fff;
        }
        .web ul li:hover{
            background-color: #080;
        }
    </style>
</head>
<body>
    <div class="web">
        <!-- 主导航必须li套a -->
        <ul>
            <li><a href="#">新闻1</a></li>
            <li><a href="#">新闻2</a></li>
            <li><a href="#">新闻3</a></li>
            <li><a href="#">新闻4</a></li>
            <li><a href="#">新闻5</a></li>
            <li><a href="#">新闻6</a></li>
            <li><a href="#">新闻7</a></li>
            <li><a href="#">新闻8</a></li>
        </ul>

    </div>
</body>
</html>

在这里插入图片描述

5、清除浮动

（1）清除浮动的介绍

➢ 含义：清除浮动给别的标签带来的影响
• 影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
➢ 原因：
• 子元素浮动后脱标 → 不占位置
➢ 目的：
• 需要父元素有高度，从而不影响其他网页元素的布局
如一个上面的盒子和一个下面的盒子，上面的盒子中浮动放置了一左一右两个div，
如果上面盒子设置高度：
在这里插入图片描述
如果上面盒子没有设置高度：浮动后元素不占位会改变其他元素的布局

此时top盒子高度为0

（2）清除浮动的方法

① 直接设置父元素高度

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

② 额外标签法
操作：
1.在父元素内容的最后添加一个块级元素
2. 给添加的块级元素设置 clear:both

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

<style>
        .top{
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */ 
        }
        /* 2、给添加的块级元素设置 clear:both  */
        .clearfix{
            clear: both;
        }
        .buttom{
            
            height: 200px;
            background-color: green;
        }
        .left{
            float: left;
            width: 200px;
            height: 300px;
            background-color: pink;
        }
        .right{
            float: right;
            width: 770px;
            height: 300px;
            background-color: blue;
        }
    </style>

<body>
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
        <div class="clearfix"></div>  /* 1、在父元素内容的最后添加一个块级元素  */
    </div>
    <div class="buttom"></div>
</body>

③ 单伪元素清除
操作：用伪元素替代了额外标签，就是通过伪标签，不创建实际标签（和额外标签原理一样）
![在这里插入图片描述](https://img-blog.csdnimg.cn/64a146461e704deca910c03692ef76a4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAcXFfNDA4MzIwMzQ=,size_20,color_FFFFFF,t_70,g_se,x

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

  .clearfix::after{
            content:'';
            /* 通过伪元素添加的是行内标签，额外标签是添加一个快标签，要转成块标签 */
            display: block;
            clear:both;
        }

<body>
    <div class="top clearfix">      /*直接给标签加类clearfix*/
        <div class="left"></div>
        <div class="right"></div>
        <!-- 通过css添加伪标签 -->
    </div>
    <div class="buttom"></div>
</body>