CSS|08 浮动清除浮动

浮动

需求:
能够实现让多个元素排在同一行，并且给这些元素设置宽度与高度!
让多个元素排在同一行:行内元素的特性
给这些元素设置宽高:块级元素的特性

在标准文档流中的元素只有两种:块级元素和行内元素。如果想让一些元素既要有块级元素的特点也要有行内元素的特点，只能让这些元素脱离标准文档流。
浮动可以让元素脱离标准文档流就可以实现让多个元素排在同一行并且可以设置宽高!
浮动它是通过一个浮动属性来实现
float:这个属性有两个值left(向左浮动)向左移动、right(向右浮动)

向右移动浮动元素的特性:
浮动元素它脱离标准文档流，它不再占用空间了
我们可以把浮动元素理解为“漂”
浮动元素它的层级要比标准文档流里面的元素层级要高，它会将标准文档流中的元素给压盖住
浮动元素它遇到了父元素的边框然后就停止了浮动
浮动元素它还会遇到上一个浮动元素后就停止了浮动
浮动元素浮动以后 其父元素不会再包裹着浮动元素
我们将行内元素进行浮动以后，那么这个行内元素它会变成块级元素

块元素进行浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style type="text/css">
        .box{
            width: 600px;
            border: 1px solid #000;
            margin-left: auto;
            margin-right: auto;
        }

        .div1{
            width: 100px;
            height: 100px;
            /* #f00 红色*/
            background-color: #f00;
        }

        .div2{
            width: 110px;
            height: 100px;
            /*#0f0 绿色*/
            background-color: #0f0;
        }

        .div3{
            width: 120px;
            height: 100px;
            /*#00f 蓝色 */
            background-color: #00f;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div>

</body>
</html>

div标签是block块级元素，占满一整行。所以不加浮动，是像下面一样的。
在这里插入图片描述
给第一个div1红色块，添加左浮动。此时红色不占用行内，漂起来，原本排队的绿色和蓝色，占用了红色原本位置，排队往前排了一下。在这里插入图片描述
给div1和div2也添加左浮动，红色和绿色就都不用排队了，他们都在行内了。蓝色往前排队了。
在这里插入图片描述
将3个div都设置左浮动，就没有元素在box中，所以没黑框了。3个div都漂出来了，横着排队了。
在这里插入图片描述

行内元素进行浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内元素进行浮动</title>
    <style type="text/css">
        .box{
            width: 600px;
            border: 1px solid #000;
            margin-left: auto;
            margin-right: auto;
        }

        .s1{
            width: 100px;
            height: 100px;
            background-color: #f00;
        }

        .s2{
            width: 100px;
            height: 100px;
            background-color: #0f0;
        }

        .s3{
            width: 100px;
            height: 100px;
            background-color: #00f;
        }

    </style>
</head>
<body>
    <div class="box">
        <span class="s1">文本一</span>
        <span class="s2">文本二</span>
        <span class="s3">文本三</span>
    </div>
</body>
</html>

未加浮动时，行内元素背景色，只显示行内那么大。
在这里插入图片描述
s1添加左浮动，s1从行内元素变块级元素，形状显示正常，s2和s3贴着s1。
在这里插入图片描述
s1添加左浮动，将s2添加右浮动，s3更贴着s1,s2漂到最右边了。
在这里插入图片描述
s1添加左浮动，将s2，s3添加右浮动。box中没有元素了，都漂出来了。
在这里插入图片描述

小知识点

通用选择器来去除HTML中所有标签的默认内填充和外边距，它就不会影响到我们的排版布局了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动案例</title>
    <style type="text/css">
        /*通用选择器来去除HTML中所有标签的默认内填充和外边距
        它就不会影响到我们的排版布局了
        */
        *{
            margin: 0px;
            padding: 0px;
        }

        .box{
            width: 100%;
            height: 40px;
            background-color: #f00;
        }

        ul{
            border: 1px solid #f00;
        }

        ul li{
            border: 1px solid #ccc;
        }

    </style>
</head>
<body>
    <div class="box"></div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

</body>
</html>

不添加通用选择器样式前，会有margin
在这里插入图片描述
添加后，就没有间隙了。margin为0。
在这里插入图片描述

浮动案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动案例</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        body{
            background-image: url(../img/bg.png);
            /*background-repeat: repeat-x;*/

        }
        .nav{
            width: 960px;
            height: 40px;
            margin-right: auto;
            margin-left: auto;
        }
        .nav ul{
            /*将列表前面的项目符号去掉*/
            list-style: none;
        }
        .nav ul li{
            /*把每一个li标签进行向左浮动
            li标签它本来是块状元素，
            浮动后，让每一个li排列成一行
            */
            float: left;
            /*给每一个li标签设置一个宽度*/
            width: 120px;
            /*将文本进行居中*/
            text-align: center;
            background-color: #FFA500;
            height: 30px;
            line-height: 30px;
        }
        a{
            text-decoration: none;
            color: white;
        }

    </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 name="viewport" content="width=device-width, initial-scale=1.0">
    <title>为什么要清楚浮动</title>
    <style type="text/css">
        .box{
            width: 600px;
            border: 1px solid #000;
            margin-right: auto;
            margin-left: auto;
        }
        .box div{
            width: 100px;
            height: 100px;
        }
        .div1{
            background-color: #f00;
            float: left;
        }
        .div2{
            background-color: #0f0;
            float: left;
        }
        .div3{
            background-color: #00f;
            float: right;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div>
    <h2>浮动与清除浮动</h2>

</body>
</html>

就是这里的h2标题因为上面的div浮动，所以h2标题往上跑了，这时候需要清除浮动，标题才会显示到div下面。
在这里插入图片描述

清除浮动的三种方法：

1.给浮动元素的父元素设置一个固定的高度。

不建议使用，因为一个元素的高度一般情况下不是手动设置的，它应该是由其自身的内容来撑高的！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置固定高度清除浮动</title>
    <style type="text/css">
        .box{
            width: 600px;
            border: 1px solid #000;
            margin-right: auto;
            margin-left: auto;
            /*清除浮动：给浮动元素的父元素设置一个固定的高度*/
            height: 400px;
        }
        .box div{
            width: 100px;
            height: 100px;
        }
        .div1{
            background-color: #f00;
            float: left;
        }
        .div2{
            background-color: #0f0;
            float: left;
        }
        .div3{
            background-color: #00f;
            float: right;
        }


    </style>
</head>
<body>
    <div class="box">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>

    </div>
    <h2>浮动与清除浮动</h2>

</body>
</html>

在这里插入图片描述

2.使用清楚浮动的样式属性clear。

clear这个属性是专用于清除浮动的，它有3个值：
clear:left; 清除左浮动
clear:right; 清除右浮动
clear:both; 两者都清楚
这个属性一般是用在最后，一个浮动元素的下面，在最后一个浮动元素的下面新建一个空白的div，不要给这个div里面放置内容，它只做一件事就是清楚浮动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用clear属性清除浮动</title>
    <style type="text/css">
        .box{
            width: 600px;
            border: 1px solid #000;
            margin-right: auto;
            margin-left: auto;
        }
        .box div{
            width: 100px;
            height: 100px;
        }
        .div1{
            background-color: #f00;
            float: left;
        }
        .div2{
            background-color: #0f0;
            float: left;
        }
        .div3{
            background-color: #00f;
            float: right;
        }
        .clear{
            /*清除浮动，两者都清除*/
            clear: both;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
        <!-- 这个空白的div用来清除浮动 -->
        <div class="clear"></div>
    </div>
    <h2>浮动与清除浮动</h2>

</body>
</html>

这个有边框，是因为最后一个空的div占用内容了。
在这里插入图片描述
想试试给h2标签加clear样式
在这里插入图片描述
是这样的。

3.使用overflow：hidden这个属性来清除浮动

overflow：hidden 它原意是用来将溢出的部分进行隐藏，但是它还可以用于清除浮动。
overflow：hidden 一般主要用来将列表的浮动给清除。

案例一：隐藏溢出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>overflow的原意</title>
    <style type="text/css">
        .box{
            width: 300px;
            height: 300px;
            border: 1px solid #f00;
            /*将溢出的部分隐藏*/
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="box">
        吃粽子、做香包、赛龙舟……不知不觉又是一年端午节，在这个中国传统节日来临之际石景山区古城街道各社区、楼宇开展形式多样的活动，共邀市民过端午。
为弘扬中华民族传统文化，增强社区温馨感和凝聚力，拉近社区邻里间距离，营造幸福和谐社区，近日，老古城东、特钢、十万平、水泥厂社区新时代文明实践站组织社区居民们开展“迎端午，包粽子”活动。吃粽子、做香包、赛龙舟……不知不觉又是一年端午节，在这个中国传统节日来临之际石景山区古城街道各社区、楼宇开展形式多样的活动，共邀市民过端午。
为弘扬中华民族传统文化，增强社区温馨感和凝聚力，拉近社区邻里间距离，营造幸福和谐社区，近日，老古城东、特钢、十万平、水泥厂社区新时代文明实践站组织社区居民们开展“迎端午，包粽子”活动。吃粽子、做香包、赛龙舟……不知不觉又是一年端午节，在这个中国传统节日来临之际石景山区古城街道各社区、楼宇开展形式多样的活动，共邀市民过端午。
为弘扬中华民族传统文化，增强社区温馨感和凝聚力，拉近社区邻里间距离，营造幸福和谐社区，近日，老古城东、特钢、十万平、水泥厂社区新时代文明实践站组织社区居民们开展“迎端午，包粽子”活动。吃粽子、做香包、赛龙舟……不知不觉又是一年端午节，在这个中国传统节日来临之际石景山区古城街道各社区、楼宇开展形式多样的活动，共邀市民过端午。
为弘扬中华民族传统文化，增强社区温馨感和凝聚力，拉近社区邻里间距离，营造幸福和谐社区，近日，老古城东、特钢、十万平、水泥厂社区新时代文明实践站组织社区居民们开展“迎端午，包粽子”活动。
    </div>
</body>
</html>

在这里插入图片描述

案例二：给列表清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用overflow：hidden清除浮动</title>
    <style type="text/css">
        ul{
            list-style: none;
        }

        ul li{
            float: left;
            border: 1px solid #f00;
        }

    </style>
</head>
<body>
    <!-- 给li标签的父元素设置一个overflow:hidden -->
    <ul style="overflow: hidden;">
        <li>栏目管理1</li>
        <li>栏目管理2</li>
        <li>栏目管理3</li>
        <li>栏目管理4</li>
        <li>栏目管理5</li>
        <li>栏目管理6</li>
        <li>栏目管理7</li>
        <li>栏目管理8</li>
        <li>栏目管理9</li>
        <li>栏目管理10</li>
    </ul>
    <h2>清除浮动，清除浮动</h2>
</body>
</html>

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/937029.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

[Pro Git#3] 远程仓库 | ssh key | .gitignore配置

[Pro Git#3] 远程仓库 | ssh key | .gitignore配置

目录 1. 分布式版本控制系统的概念 2. 实际使用中的“中央服务器” 3. 远程仓库的理解 4. 新建远程仓库 5. 克隆远程仓库 6. 设置SSH Key 实验 一、多用户协作与公钥管理 二、克隆后的本地与远程分支对应 三、向远程仓库推送 四、拉取远程仓库更新 五、配置Git忽略…
阅读更多...
【uni-app】App与webview双向实时通信

【uni-app】App与webview双向实时通信

【uni-app】App与webview双向实时通信 在 Uniapp 中&#xff0c;App 与 里面嵌入的 webview 进行双向的实时通信 vue2 &#xff0c; 模拟器 主要分为两部分 webview 向 app 发送信息 app 向 webview 发送信息 以下是实现方式&#xff0c;用一个例子来说明 &#xff08;文…
阅读更多...
微信小程序处理交易投诉管理，支持多小程序

微信小程序处理交易投诉管理，支持多小程序

大家好&#xff0c;我是小悟 1、问题背景 玩过微信小程序生态的&#xff0c;或许就有这种感受&#xff0c;如果收到投诉单&#xff0c;不会及时通知到手机端&#xff0c;而是每天早上10:00向小程序的管理员及运营者推送通知。通知内容为截至前一天24时该小程序账号内待处理的交…
阅读更多...
AIGC-------AI生成内容如何赋能AR和VR体验?

AIGC-------AI生成内容如何赋能AR和VR体验?

AI生成内容如何赋能AR和VR体验 引言 增强现实&#xff08;AR&#xff09;和虚拟现实&#xff08;VR&#xff09;技术近年来蓬勃发展&#xff0c;为用户提供了沉浸式的体验。这些技术已经广泛应用于游戏、教育、医疗、建筑等领域。然而&#xff0c;AR和VR体验的质量与内容的丰富…
阅读更多...
zotero安装教程（包括茉莉花插件）

zotero安装教程（包括茉莉花插件）

zotero安装教程&#xff08;包括茉莉花插件&#xff09; zotero下载(windows)1-安装 Zotero2-安装 Zotero Connector3-安装浏览器插件--jasminum茉莉花功能&#xff1a;插件下载地址&#xff1a;[https://github.com/search?qjasminum&typerepositories](https://github.c…
阅读更多...
M｜可可西里

M｜可可西里

title: 可可西里 time: 2024-12-15 周日 rating: 8.5 豆瓣: 8.9 上映时间: “2004” 类型: M剧情犯罪 导演: 陆川 Chuan Lu 主演: 多布杰 Duobujie张垒 Lei Zhang 国家/地区: 中国大陆 片长/分钟: 90分钟 M&#xff5c;可可西里 粗砺的苍凉&#xff0c;沉默的悲壮。…
阅读更多...
ArcGIS教程(007)：制作中国行政区划图

ArcGIS教程(007)：制作中国行政区划图

文章目录 000：数据准备001：利用地理数据制作中国行政区划图000：数据准备 通过网盘分享的文件：ArcGIS教程(007)：中国行政区划图教程练习数据.zip 链接: https://pan.baidu.com/s/1nMiRYD-dbv2S0DoeQzR87g?pwd=3535 提取码: 3535001：利用地理数据制作中国行政区划图 ne_…
阅读更多...
KeepAlive与RouterView缓存

KeepAlive与RouterView缓存

参考 vue动态组件&#xff1c;Component&#xff1e;与&#xff1c;KeepAlive&#xff1e; KeepAlive官网介绍 缓存之keep-alive的理解和应用 Vue3Vite KeepAlive页面缓存问题 vue多级菜单(路由)导致缓存(keep-alive)失效 vue3 router-view keeperalive对于同一路径但路径…
阅读更多...
类与对象以及ES6的继承

类与对象以及ES6的继承

认识class定义类 类的声明用的比较多 类与构造函数的异同 类的构造函数 类的实例方法 类的访问器方法 在类里面写拦截方法 类的静态方法 通过类名直接访问 es6类的继承-extends super关键字 子类可以重写父类方法包括父类的静态方法也可以继承父类的静态方法 babel可以将新的代…
阅读更多...
AI监控赋能健身馆与游泳馆全方位守护，提升安全效率

AI监控赋能健身馆与游泳馆全方位守护，提升安全效率

一、AI视频监控技术的崛起 随着人工智能技术的不断发展&#xff0c;AI视频监控正成为各行业保障安全、提升效率的关键工具。相比传统监控系统&#xff0c;AI技术赋予监控系统实时分析、智能识别和精准预警的能力&#xff0c;让“被动监视”转变为“主动防控”。 二、AI监控应用…
阅读更多...
嵌入式学习(18)-stm32F407串口接收空闲中断+DMA

嵌入式学习(18)-stm32F407串口接收空闲中断+DMA

一、概述 在一些一次性接收大批量数据的引用场合&#xff0c;如果使用接收中断会频繁的进入接收中断影响代码的运行效率。为了解决这个问题可以使用串口的空闲中断DMA实现。 二、应用 在网上招了一些例程在STM32F407的平台上都没有跑通会出现各种异常&#xff0c;主要原因还…
阅读更多...
2024.12.15CISCN长城杯铁人三项赛

2024.12.15CISCN长城杯铁人三项赛

WEB Safe_Proxy 刚开始比赛看到题目名字里面有Proxy 就先来做这个了(在最近的比赛中见到的proxy题比较多) 题目进入之后给了源码 源码 from flask import Flask, request, render_template_string import socket import threading import htmlapp Flask(__name__)app.rout…
阅读更多...
【Linux服务器nginx前端部署详解】ubantu22.04，前端Vue项目dist打包

【Linux服务器nginx前端部署详解】ubantu22.04，前端Vue项目dist打包

本文主要讲一下在Linux系统环境下&#xff08;以ubantu22.04为例&#xff09;&#xff0c;如何用nginx部署前端Vue项目打包的dist静态资源。有些具体的命令就不展开讲了&#xff0c;可以自行查看其他博主的文章&#xff0c;我主要讲整体的步骤和思路。 一、ubantu系统安装ngin…
阅读更多...
SAP软件如何启用反记账功能

SAP软件如何启用反记账功能

SAP软件和国内ERP软件不一样&#xff0c;它在录入会计凭证时是不可以录入负数的&#xff08;即红冲凭证&#xff09;&#xff0c;因此无法直接实现传统意义上的红字冲销。 比如&#xff0c;如下SAP正常和冲销业务产生会计凭证如下&#xff1a; 正常的业务凭证&#xff1a; 借…
阅读更多...
iOS swift开发系列 -- tabbar问题总结

iOS swift开发系列 -- tabbar问题总结

1.单视图如何改为tabbar&#xff0c;以便显示2个标签页 右上角➕&#xff0c;输入tabbar 找到控件&#xff0c;然后选中&#xff0c;把entrypoint移动到tabbar控件 2.改成tabbar&#xff0c;生成两个item&#xff0c;配置各自视图后&#xff0c;启动发现报错 Thread 1: “-[p…
阅读更多...
Level DB --- coding

Level DB --- coding

Util coding是Level DB中重要的数据结构&#xff0c;它主要用来将uint32&#xff0c;和uint64高效的序列化到字符串中和从字符串中反序列化出来。 coding两种序列化形式 Util coding中主要提供两种序列化形式&#xff0c;即Fixed形式和Var形式。其中Fixed形式是常规形式&…
阅读更多...
EfficientNet与复合缩放理论（Compound Scaling Theory） 详解（MATLAB）

EfficientNet与复合缩放理论（Compound Scaling Theory） 详解（MATLAB）

1.EfficientNet网络与模型复合缩放 1.1 EfficientNet网络简介 1.1.1 提出背景、动机与过程 EfficientNet是一种高效的卷积神经网络&#xff08;CNN&#xff09;&#xff0c;由Google的研究团队Tan等人在2019年提出。EfficientNet的设计目标是提高网络的性能&#xff0c;同时减…
阅读更多...
CentOS7 Apache安装踩坑

CentOS7 Apache安装踩坑

Gnome桌面右键弹出终端。 [rootlocalhost ~]# yum repolist 已加载插件&#xff1a;fastestmirror, langpacks /var/run/yum.pid 已被锁定&#xff0c;PID 为 2611 的另一个程序正在运行。 Another app is currently holding the yum lock; waiting for it to exit... [root…
阅读更多...
接收文件并保存在本地

接收文件并保存在本地

接受多个文件 前端 <input typefile namefilelist> <input typefile namefilelist> <input typefile namefilelist> ... 后端 filelist request.files.getlist(name属性值) 获取文件内容 单个文件 file request.files.get(file)content file.read…
阅读更多...
关于解决VScode中python解释器中的库Not Found的问题

关于解决VScode中python解释器中的库Not Found的问题

关于解决VScode中python解释器中的库Not Found的问题 背景介绍解决步骤1. 检查当前使用的Python解释器2. 确保选择正确的Python解释器3. 安装库到指定的Python环境①使用 pip 完整路径指定&#xff1a;②使用 conda 安装&#xff1a;③使用 python -m pip 指定解释器&#xff1…
阅读更多...
最新文章

Copyright @ 2022~2023