CSS布局——浮动（P112-P128）

于 2022-11-11 15:55:56 发布
阅读量256 收藏
点赞数 1
文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuzhiweihhhhhh/article/details/127679812
版权

能够使用结构伪类选择器在HTML中选择元素，能够说出标准流元素的布局特点，能够说出浮动元素的特点，能够使用浮动完成小米模块布局案例，能够说出清除浮动的目的，并能够使用清除浮动的方法

一、结构伪类选择器

根据元素在HTML中的结构关系（主要针对嵌套关系）查找元素，减少对于HTML中类的依赖，有利于保持代码整洁，常用于查找某父级选择器中的子元素。以li元素为例进行展示，代码如下：

  li:first-child {
            background-color: green;        /* 选中第一个 */
        }
        li:last-child {
            background-color:red;          /* 最后一个 */
        }
        li:nth-child(5) {
            background-color:pink;        /* 任意一个 */
        }
        li:nth-last-child(2) {
            background-color: blue;       /* 倒数第xx个 */
        }

        /* 偶数 li:nth-child(2n)  */
        /*奇数 li:nth-child(2n+1) （2n-1）也可以 */        
        /* 找到前3个li:nth-child(-n+3)  ，n的取值为0、1、2、3、4... */
        /* 找从第三个往后 li:nth-child(n+3)  */
            /*  4的倍数 */
            li:nth-child(4n) {
            background-color: green;
        }

二、伪元素

一般页面中的非主体内容可以使用伪元素，是由CSS模拟出来的标签效果，用来制作装饰性的小图，区别于HTML设置的标签，有两种伪元素。

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

注意点：必须设置context属性才能生效，伪元素默认是行内元素 

context：' ' 这里必须填充内容，否则不能当成元素进行渲染操作

<!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: '老鼠';  
            width: 100px;
            height: 200px;
        }

        .father::after {
            content: '大米';
            /* 默认是行内块，设置宽高不生效，需要display转换为行内块或者块 */
        }
    </style>
</head>
<body>
    <!-- 伪元素 通过css创建标签, 装饰性的不重要的小图 -->

    <!-- 找父级, 在这个父级里面创建子级标签 -->

    <div class="father">爱</div>

    <!-- 老鼠爱大米 -->
</body>
</html>

三、标准流

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

常见的标准流排版规则：

  • 块级元素：从上往下，垂直布局，独占一行
  • 行内元素或者行内块元素：从左往右，水平布局，空间不够自动拆行

 注意：浏览器在解析行内和行内块标签时，如果代码换行书写，会产生一个空格的间距。如果在代码不换行的前提下，要求无空格接触，则需要使用浮动。

四、浮动

早期作用：图文环绕

现在作用：用于布局，让垂直布局的盒子变成水平布局，如：一个在左，一个在右

 浮动元素的特点：

1. 浮动元素会脱标，在标准流中不占位置
2. 浮动元素比标准流高出半个级别，可以覆盖标准流中的元素
3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
4. 浮动元素有特殊的显示效果：① 一行可以显示多个 ② 可以设置宽高
注意点：浮动的元素不能通过text-align:center或者margin:0 auto 设置
浮动案例： 
<!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: pink; */
        }

        .left {
            float: left;

            width: 234px;
            height: 614px;
            background-color: #800080;
        }

        .right {
            float: right;

            width: 978px;
            height: 614px;
            /* background-color: green; */
        }

        ul {

            /* 去掉列表的符号 */
            list-style: none;
        }

        .right li {
            float: left;

            margin-right: 14px;
            margin-bottom: 14px;

            width: 234px;
            height: 300px;
            background-color: #87ceeb;
        }

        /* 如果父级的宽度不够, 子级会自动换行 */
        /* 第四个li和第八个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>
<!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;       /* 给a设置宽高，可以使点击范围最大，若是给li，则只能点击文字 */
            /* 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>

五、清除浮动

清除浮动是指清除浮动带来的影响，如果子元素浮动了，此时子元素不能撑开父元素，需要父元素有高度，从而不影响其他网页元素的布局

<!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>

 

 由于浮动的父元素高度设置为0，那么产生的效果如下：

清除浮动的方法：

1.直接设置父元素高度，该方法简单粗暴，方便；但有些布局中不能固定父元素高度，如:新闻列表、京东推荐模块

2.额外标签法：在父元素内容的最后添加一个块级元素，给添加的块级元素设置clear：both。该方法在会在页面中添加额外的标签，会让页面的HTML结构变得复杂

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

3.单伪元素清除法：用伪元素代替了额外标签。在项目中使用，直接给标签加清除浮动

  /* 单伪元素清除浮动 和 额外标签法原理是一样的 */
  <style>
        .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>
        <!-- 通过css 添加标签 -->
    </div>
    <div class="bottom"></div>

4.双伪元素清除法，在项目中使用，直接给标签加类即可清除浮动

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

        /* 真正清除浮动的标签 */
        .clearfix::after {
            /* content: '';
            display: table; */
            clear: both;
        }
    </style>
</head>
<body>
    <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>

5.给父元素设置overflow：hidden。该方法方便

   <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;

            overflow: hidden;
        }
</style>

 

皎月亲随
关注
CSS浮动和清除浮动
weixin_33716557的博客
01-06 290
1.浮动float 　　div配合float浮动来做页面的布局，浮动最常用的地方就是用来做布局。只有一个标签设置了浮动float属性，就会变成块级标签。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title&gt...
html+css 浮动标签
weixin_45722135的博客
02-15 4386
一：浮动 浮动有两种方式：1]display:inline{这个知道就行} 2]就是 float {这就是css中最常用的浮动方式} 二：CSS浮动 1】float是CSS样式中的定位属性，用于设置标签的居左和居右浮动， 2】浮动值:left{向左浮动} right：{向右浮动} 例： &...
CSS--浮动
weixin_43988680的博客
05-05 1135
浮动的特点；浮动的使用方法；父标签塌陷问题及解决方法；基于浮动的网页导航栏示例；
html css浮动标签,12种超酷HTML5 SVG和CSS3浮动标签效果
weixin_39614228的博客
06-23 96
JAVA生成条形码1.下载生成条形码所需要的jar包barcode4j.jar: 2.java生成条形码代码 import java.awt.image.BufferedImage;import java.io.Fil ...C&num; winform 代码生成http://www.cnblogs.com/luomingui/archive/2012/09/02/2667217.html...
浮动效果与特点
qq_62917168的博客
06-28 412
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。特点1：1:浮动元素会脱离文档流，元素脱离文档流以后，不会再占用文档流的位置，它下边的元素会立即向上移动2:元素浮动以后，元素会尽量向页面的左上或页面右上漂浮3:浮动元素默认不会从父元素中移出4:浮动的元素不会超过他上边的兄弟元素，最多最多一边齐5:如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移特点2: 浮动的元素不会盖住文字，文字会自动环绕
p120 - p128操作系统内核结构解析
最新发布
05-15
操作系统内核结构解析 操作系统内核是计算机系统的核心组件之一，负责管理计算机的硬件资源和提供服务给应用程序。内核可以看作是应用程序和硬件设备之间的桥梁，负责管理进程、线程、内存、硬件设备等资源。...
freescale-MC9S12P128中文手册.doc
04-10
MC9S12P系列单片机是飞思卡尔（Freescale）推出的一款高性能、低成本、低引脚数的汽车级微控制器，旨在填补16位高端MC9S12XS系列和8位低端单片机之间的市场空白。这款芯片主要应用于需要CAN或LIN/J2602通信接口的...
ATD_single_channel--OK.zip_MC9S12P128_okprm_single
09-23
【标题】"ATD_single_channel--OK.zip_MC9S12P128_okprm_single" 涉及的关键知识点是基于Freescale（现为NXP）的MC9S12P128微控制器的单通道自动测试设备（Automatic Test Device，简称ATD）数据采集系统，该系统...
意法半导体推出128Mb串行闪存芯片M25P128
11-26
M25P128采用环保的无铅封装技术——8mm×6mm MLP8封装和S016封装，符合RoHS规定，确保了在环境友好方面的合规性。工作电压在2.7V到3.6V之间，工作温度范围为-40到+85摄氏度，数据可以安全地保存20年，每个扇区能承受...
MC9S12P128 datasheet
01-13
MC9S12P128微控制器是飞思卡尔半导体（现恩智浦半导体）的一款16位微控制器，属于MC9S12P系列。该系列微控制器通常被用于汽车、工业以及通用嵌入式应用中。根据提供的文档内容，我们可以详细了解一下MC9S12P128以及...
12种超酷HTML5 SVG和CSS3浮动标签效果
souhugirl的专栏
03-20 2346
这是一组效果非常炫酷的SVG和CSS3表单浮动标签特效。这组浮动标签特效共12种效果，这些浮动标签效果部分在元素的伪元素上使用CSS transitions和CSS animations完成，一部分则使用SVG来制作变形动画。 在前面已经发表了一篇关于SVG浮动标签的文章：14种CSS3炫酷表单input输入框美化效果。这篇文章中的浮动标签效果是它的一些补充，在原来14种效果的基础上有增加了12
CSS学习笔记8-浮动（float）
emmm520的博客
08-24 275
CSS学习笔记8——浮动 浮动 由于div、h1、h2、p等标签是块级标签，会独占一行，如果想让多个块级标签在一行显示，需要用到浮动标签。 浮动在css中用float来表示，常用值为left，right。 块级标签与行级标签演示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>块级标签</title> <style type="tex
css基础知识 -- 浮动
qq_52993453的博客
11-19 553
1.float属性：规定元素如何浮动；用于定位和格式化内容 left - 元素浮动到其容器的左侧 right - 元素浮动在其容器的右侧 none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。 inherit - 元素继承其父级的 float 值 float 属性可实现文字包围图片的效果（wps里面环绕模式） 2.clear属性：规定哪些元素可以在清除的元素旁边以及在哪一侧浮动 none - 允许两侧都有浮动元素。默认值 left - 左侧不允许浮动元素 right- 右..
CSS系列之浮动详解
老__L的博客
02-02 5930
本文主要介绍CSS的clear属性。元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制。移动到指定位置。
【css浮动讲解】
m0_67742636的博客
05-31 238
网页布局本质是用css来摆放盒子，把盒子摆放到相应的位置，css提供了三种传统布局方式（简单来说，就是盒子如何进行排列顺序） 1. 普通流（标准流） 2.浮动 3.定位 1.2 标准流（普通流或者叫文档流） 1.块元素：div,hr,p,h1-h6,ul,ol,li,dl,form,tabl 2.行内元素（内联元素）：会按照顺序会从左往右依次排序，碰到父元素的边缘则自动换行，常用标签有：span,a,i,em等 以上都是标准流布局就是按照标签规定好的顺序进行排列 <!DOCT
前端之HTML元素浮动篇（五）
qq_19831379的博客
07-22 122
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文字环绕和浮动</title> <style> .red { width: 100px; height: 100px; background-color: red; /* 浮动元素会脱了网页文档，与其他元素发生重叠，但是不能与文字内容，所以产生了环绕效果.
CSS 浮动
m0_52861684的博客
08-28 5259
CSS浮动。
标签特性 浮动（float）
baobao__的博客
08-06 1748
标签特性一.标签的特性 一.标签的特性 块级元素 块级元素会独立成行； 块级元素的宽度默认撑满欺父元素的宽度； 具有盒模型的特征（默认可以设置：宽度 高度 间距 留白 边框）； 块级元素中可以添加块级元素，行级元素， 行块元素， 常见的块级元素： == div p h1 h2 h3… ul ol li dl dt dd等 == ...
CSS之浮动布局与常用标签
沙漠皇帝本拉登
02-28 531
CSS浮动布局与常用标签 浮动布局 float left | right | none 向左浮动 向右浮动 清除浮动 一些标签会自带浮动布局,此时要想清除掉这些浮动 需要使用float none 正常时的代码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf...
MC9S12P128单通道ATD数据采集调试成功
资源摘要信息:"MC9S12P128是一款由飞思卡尔半导体（现恩智浦半导体）开发的基于S12X内核的16位微控制器，广泛应用于汽车和工业控制系统。ATD（模数转换器）是微控制器中用于将模拟信号转换为数字信号的模块。在本次...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值