当前位置： 首页 > news >正文

【前端从0开始】CSS——9、浮动

news 文章来源：https://blog.csdn.net/a1137588003/article/details/132326818 2024/11/17 12:40:08

1. 浮动（float）

1.1 定义

float 属性定义元素向哪个方向浮动。之前这个属性应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，不论它本身是何种元素。

取值:

  • none: 默认值，不浮动
  • left: 左浮动
  • right: 右浮动

1.2 用法

li {float:left;
}
  • 横向排列布局
<style>div{width: 100px;height: 100px;float: left;}.one{background-color: red;}.two{background-color: green;}.thr{background-color: blue;}
</style>
<div class="one"></div>
<div class="two"></div>
<div class="thr"></div>

在这里插入图片描述

  • 左右排列布局
<style> div{width: 100px;height: 100px;}.one{background-color: red;float: left;}.two{background-color: green;float: right;}.thr{background-color: blue;float: left;}
</style>
</head>
<body><div class="one">one</div><div class="two">two</div><div class="thr">three</div>
</body>

在这里插入图片描述

1.3 特性

  • 浮动元素会去找离它最近的有浮动的元素进行贴边
  • 假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行
  • 右浮动会颠倒盒子顺序
  • 行内元素设置了浮动后，默认已转为块级元素，可以直接设置宽高，无需转换
  • 块级元素，如果没有设置宽高，浮动后， 会收缩到内容的大小
  • 浮动元素会脱离文档流，会压住下一个块元素，但不会压住其内容
<style>/* 特性1 特性2 */.box{width:500px;}.box-item{float:left;width:200px;height:200px;border:2px solid red;}/* 特性3 */.box-item{float:right;width:200px;height:200px;border:2px solid red;}/* 特性4 */.box-span{float:right;width:200px;height:200px;border:2px solid red;}/* 特性5 */.box-div{float:left;}
</style>
<div class="box"><div class="box-item">1</div><div class="box-item">2</div><div class="box-item">3</div><div class="box-item">4</div><span class="box-span">5</div><div class="box-div">6</div>
</div>

1.4 清除浮动

1.4.1 父元素高度塌陷

子元素浮动，父元素没有设置高度，会出现高度撑不开的现象，称之为父元素高度塌陷。

<style>.box {width:500px;border:2px solid black;}.box-item {float:left;width:200px;height:200px;border:2px solid red;}
</style>
<div class="box"><div class="box-item">1</div><div class="box-item">2</div><div class="box-item">3</div><div class="box-item">4</div>
</div>

1.4.2 清浮动本质

元素浮动后会出现相对应的页面布局问题，清除浮动的本质是解决元素浮动后造成的页面布局的问题。

1.4.3 常见的清除浮动方式

  • 加额外标签
    浮动元素后面加一个空标签，设置样式 clear:both;，左右两侧均不允许浮动元素。

  • 定高法
    给浮动元素的父元素设置高度大于或等于最高的浮动元素的高度，用于小板块，高度可以写死的部分。

  • 父元素添加 overflow:hidden 属性
    利用 overflow:hidden 清除浮动时，父元素里面不能有定位超出的元素，如果有，超出的部分会被隐藏。

  • 利用after伪元素清除浮动
    注意： 项目中我们常用after伪元素清除浮动，因为它不会额外增加标签，而且不会出现因为用overflow:hidden超出的部分会被隐藏，父元素高度也不用写死，我们只要在页面写一次清浮动的代码，在需要清浮动的位置加上 clearfix 类名就可以了。

<style>/* 方法一： 浮动元素后⾯加⼀个空标签，设置样式 clear:both; */ .box {width:500px;border:2px solid black;}.box-item {float:left;width:200px;height:200px;border:2px solid red;}.clear{clear:both;}
</style>
<div class="box"><div class="box-item">1</div><div class="box-item">2</div><div class="box-item">3</div><div class="box-item">4</div><div class="clear"></div>
</div>

<style>/* 方法二：定⾼法 给浮动元素的⽗元素设置⾼度⼤于或等于最⾼的浮动元素的⾼度 */.box {width:500px;height:500px;border:2px solid black;}.box-item {float:left;width:200px;height:200px;border:2px solid red;}
</style>
<div class="box"><div class="box-item">1</div><div class="box-item">2</div><div class="box-item">3</div><div class="box-item">4</div>
</div>

<style>/* 方法三： 给父级元素添加 overflow: hidden; */.box {width:500px;border:2px solid black;overflow:hidden;}.box-item {float:left;width:200px;height:200px;border:2px solid red;}
</style>
<div class="box"><div class="box-item">1</div><div class="box-item">2</div><div class="box-item">3</div><div class="box-item">4</div>
</div>

<style>    .box {        width:500px;        border:2px solid black;    }    .box-item {        float:left;        width:200px;        height:200px;        border:2px solid red;    }    .clearfix::after {        content: "";clear: both;display: block;}
</style>
<div class="box clearfix">    <div class="box-item">1</div>    <div class="box-item">2</div>    <div class="box-item">3</div>    <div class="box-item">4</div>
</div>

1.4.4 清除浮动注意事项

  • 同级的元素，要么全部浮动，要么全部不浮动。
  • 子元素浮动，父元素去清除浮动，如果父元素也浮动，寻找距离最近的没有浮动的祖先元素去做清除浮动的操作。
  • 父元素有绝对定位的不需要清除浮动。

相关文章：

【前端从0开始】CSS——9、浮动

1. 浮动&#xff08;float&#xff09; 1.1 定义 float 属性定义元素向哪个方向浮动。之前这个属性应用于图像&#xff0c;使文本围绕在图像周围&#xff0c;不过在 CSS 中&#xff0c;任何元素都可以浮动。浮动元素会生成一个块级框&#xff0c;不论它本身是何种元素。 取值…...

编程日记 2023/8/23 23:05:52

如何在Moonriver网络上向社区代表委托投票权利

我们之前介绍了「社区代表」这一概念&#xff0c;想必大家对社区代表在治理中扮演的角色和地位有了一定的了解。 本文将介绍如何将您的投票权利委托给社区代表。请注意&#xff0c;在委托Token给社区代表这一过程中&#xff0c;并非将您的Token转移给任何人&#xff0c;而且此…...

编程日记 2023/8/23 23:04:51

时序预测 | MATLAB实现基于CNN-GRU卷积门控循环单元的时间序列预测-递归预测未来(多指标评价)

时序预测 | MATLAB实现基于CNN-GRU卷积门控循环单元的时间序列预测-递归预测未来(多指标评价) 目录 时序预测 | MATLAB实现基于CNN-GRU卷积门控循环单元的时间序列预测-递归预测未来(多指标评价)预测结果基本介绍程序设计参考资料 预测结果 基本介绍 MATLAB实现基于CNN-GRU卷积…...

编程日记 2023/8/23 23:03:48

【李群李代数】李群控制器（lie-group-controllers）介绍——控制 SO(3) 空间中的系统的比例控制器Demo...

李群控制器SO(3)测试 测试代码是一个用于控制 SO(3) 空间中的系统的比例控制器。它通过计算控制策略来使当前状态逼近期望状态。该控制器使用比例增益 kp 进行参数化&#xff0c;然后进行一系列迭代以更新系统状态&#xff0c;最终检查状态误差是否小于给定的阈值。这个控制器用…...

编程日记 2023/8/23 23:02:47

DP读书：鲲鹏处理器 架构与编程（六）PCI Express 总线

处理器与服务器&#xff1a;PCI Express 总线 PCI Express 总线1. PCI Express 总线的特点a. 高速差分传输b. 串行传输c. 全双工端到端连接d. 基于多通道的数据传输方式e. 基于数据包的传输 2. PCI Express 总线的组成与拓扑结构a. 根复合体b. PCI Express桥c. 功能单元 3. PCI…...

编程日记 2023/8/23 23:01:44

Pyqt5-开源工具分解功能(文本拖拽)

开源第四篇：功能实现之拖拽功能与配置文件。 写这个功能的初衷，是因为，每次调试我都要手动敲命令，太麻烦了，想偷个懒，所以直接给这功能加上了，顺便衍生出了另一个想法，配置文件自动填写相关数据。 先看个简单的拖拽功能： 很明显吧，还是比较便捷的。所以我们本章，就在…...

编程日记 2023/8/23 23:00:43

Java版B/S架构 智慧工地源码，PC、移动、数据可视化智慧大屏端源码

智慧工地是什么&#xff1f;智慧工地主要围绕绿色施工、安全管控、劳务管理、智能管理、集成总控等方面&#xff0c;帮助工地解决运营、管理方面各个难点痛点。在互联网的加持下促进项目现场管理的创新与发展&#xff0c;实现工程管理人员与工程施工现场的整合&#xff0c;构建…...

编程日记 2023/8/23 22:59:41

无涯教程-PHP - Session选项

从PHP7 起&#xff0c; session_start()()函数接受一系列选项&#xff0c;以覆盖在 php.ini 中设置的会话配置指令。这些选项支持 session.lazy_write &#xff0c;默认情况下此函数为on&#xff0c;如果会话数据已更改&#xff0c;则会导致PHP覆盖任何会话文件。 添加的另一个…...

编程日记 2023/8/23 22:58:40

The Age of Data and AI: Challenges and Opportunities

Simply put Abstract: This paper examines the impact of the “Age of Data” on the field of artificial intelligence (AI). With the proliferation of digital technologies and advancements in data collection, storage, and processing, organizations now have ac…...

编程日记 2023/8/23 22:57:40

WPF 项目中 MVVM模式 的简单例子说明

一、概述 MVVM 是 Model view viewModel 的简写。MVVM模式有助于将应用程序的业务和表示逻辑与用户界面清晰分离。 几个概念的说明&#xff1a; model :数据&#xff0c;界面中需要的数据&#xff0c;最好不要加逻辑代码view : 视图就是用户看到的UI结构 xaml 文件viewModel …...

编程日记 2023/8/23 22:56:36

基于nginx禁用访问ip

一、背景 网络安全防护时&#xff0c;禁用部分访问ip,基于nginx可快速简单实现禁用。 二、操作 1、创建 conf.d文件夹 在nginx conf 目录下创建conf.d文件夹 Nginx 扩展配置文件一般在conf.d mkdir conf.d 2、新建blocksip.conf文件 在conf.d目录新建禁用ip的扩展配置文…...

编程日记 2023/8/23 22:55:35

【第三阶段】kotlin语言的内置函数let

1.使用普通方法对集合的第一个元素相加 fun main() {//使用普通方法对集合的第一个元素相加var list listOf(1,2,3,4,5)var value1list.first()var resultvalue1value1println(result) }执行结果 2.使用let内置函数对集合的第一个元素相加 package Stage3fun main() {//使用…...

编程日记 2023/8/23 22:54:34

【C++入门到精通】C++入门 —— 模版（template）

阅读导航 前言一、模版的概念二、函数模版1. 函数模板概念2. 函数模板定义格式3. 函数模板的原理4. 函数模版的实例化&#x1f6a9;隐式实例化&#x1f6a9;显式实例化 5. 函数模板的匹配原则 三、类模板1. 类模板的定义格式2. 类模板的实例化 四、非类型模板参数1. 概念2. 定义…...

编程日记 2023/8/23 22:53:33

ARM汇编【3】：LOAD/STORE MULTIPLE PUSH AND POP

LOAD/STORE MULTIPLE 有时一次加载&#xff08;或存储&#xff09;多个值更有效。为此&#xff0c;我们使用LDM&#xff08;加载多个&#xff09;和STM&#xff08;存储多个&#xff09;。这些指令有一些变化&#xff0c;基本上只在访问初始地址的方式上有所不同。这是…...

编程日记 2023/8/23 22:52:32

Python之Qt输出UI

安装PySide2 输入pip install PySide2安装Qt for Python&#xff0c;如果安装过慢需要翻墙&#xff0c;则可以使用国内清华镜像下载&#xff0c;输入命令pip install --user -i https://pypi.tuna.tsinghua.edu.cn/simple PySide2&#xff0c;如下图&#xff0c; 示例Demo i…...

编程日记 2023/8/23 22:51:30

【1day】复现泛微OA某版本SQL注入漏洞

目录 一、漏洞描述 二、影响版本 三、资产测绘 四、漏洞复现 一、漏洞描述 泛微e-cology是一款由泛微网络科技开发的协同管理平台，支持人力资源、财务、行政等多功能管理和移动办公。泛微OA存在SQL注入漏洞，攻击者利用Web应用程序对用户输入验证上的疏忽,在输入的数据…...

编程日记 2023/8/23 22:50:29

安卓系列机型-禁止卸载某个APP 防止误卸载软件 无需root权限

安卓系列机型-禁止安装某软件 防止“沉迷游戏的小孩”操作解析_安卓机器的博客-CSDN博客 上一期讲了如何禁止安装某个app。今天讲下如何禁止卸载某app。正好相反的操作。任何操作有利有弊。主要看使用者如何对待使用。 &#x1f494;&#x1f494;&#x1f494;以腾讯的一款游…...

编程日记 2023/8/23 22:49:27

【算法系列篇】二分查找——这还是你所知道的二分查找算法吗？

文章目录 前言什么是二分查找算法1.二分查找1.1 题目要求1.2 做题思路1.3 Java代码实现 2.在排序数组中查找元素的第一个和最后一个位置2.1 题目要求2.2 做题思路2.3 Java代码实现 3.搜索插入位置3.1 题目要求3.2 做题思路3.3 Java代码实现 4.x的平方根4.1 题目要求4.2 做题思路…...

编程日记 2023/8/23 22:48:26

【前端从0开始】JavaSript——分支流程控制

流程控制 在任何一门程序设计语言中&#xff0c;都需要支持满足程序结构 化所需要的三种流程控制: ●顺序控制 ●分支控制&#xff08;条件控制&#xff09; ●循环控制 顺序控制&#xff1a;在程序流程控制中&#xff0c;最基本的就是顺序控制。程序会按照自上而下的顺序执行…...

编程日记 2023/8/23 22:47:25

Linux权限

Linux中一切皆文件&#xff0c;那么文件就应该有相对于的类型&#xff0c;而在Linux当中&#xff0c;类型不是直接看后缀来决定的。 -普通文件、文本、可执行、归档文件等d目录b块设备、block、磁盘c字符设备、键盘、显示器p管道文件s网络socket文件l链接文件 link 然后后面的九…...

编程日记 2023/8/23 22:46:23

PMP如何备考？学习方式这里有

预习阶段&#xff1a;强烈建议跟着习课视频学习&#xff08;自己看书真的很难看懂&#xff09;&#xff0c;初步了解PMBOK&#xff0c;有个大致印象&#xff1b; 精讲阶段&#xff1a;这个时候就需要静下心来深入了解各个知识模块&#xff0c;不仅是看PMBOK&#xff0c;还要尽…...

编程日记 2023/8/23 22:45:22

【Java转Go】快速上手学习笔记（四）之基础篇三

目录 泛型内置泛型的使用切片泛型和泛型函数map泛型泛型约束泛型完整代码 接口反射协程特点WaitGroupgoroutine的调度模型&#xff1a;MPG模型 channel介绍语法&#xff1a;举例&#xff1a;channel遍历基本使用和协程一起使用案例一案例二 select...casemain.go 完整代码 文件…...

编程日记 2023/8/23 22:44:21

vue中form和table标签过长

form标签过长 效果&#xff1a; 代码&#xff1a; <el-form-item v-for"(item,index) in ticketEditTable1" :label"item.fieldNameCn" :propitem.fieldName :key"item.fieldNameCn" overflow"":rules"form[item.fieldName…...

编程日记 2023/8/23 22:43:20

java基础复习(第七日)

java基础复习(七) 1.MQ如何避免消息重复投递或重复消费&#xff1f; 在消息生产时&#xff0c;MQ 内部针对每条生产者发送到消息生成一个 inner-msg-id&#xff0c;作为去重的依据&#xff08;消息投递失败并重传&#xff09;&#xff0c;避免重复的消息进入队列&#xff1b;…...

编程日记 2023/8/23 22:42:18

day24 | 理论基础、77. 组合

目录&#xff1a; 解题及思路学习 理论基础 回溯的本质是穷举&#xff0c;穷举所有可能&#xff0c;然后选出我们想要的答案&#xff0c;如果想让回溯法高效一些&#xff0c;可以加一些剪枝的操作&#xff0c;但也改不了回溯法就是穷举的本质。 回溯法&#xff0c;一般可以…...

编程日记 2023/8/23 22:41:18

数据结构（1）

数据结构其实就是将数据按照一定的关系组织起来的集合&#xff0c;用于组织和存储数据。 1.数据结构分类 1.逻辑结构 逻辑结构是从具体问题中抽象出来的模型&#xff0c;是抽象意义的结构&#xff0c;按照对象中数据的相互关系进行分类。 1>集合结构&#xff1a;集合结构中…...

编程日记 2023/8/23 22:40:16

10个非常有用的Python库，你知道几个？

整理&#xff5c;TesterHome 这里给大家介绍10个不是最流行但非常有用的Python库&#xff0c;希望可以提供参考帮助。 PyO3 PyO3是一个Rust库&#xff0c;可以让你在Rust中编写Python模块。它可以利用 Rust 的速度和安全性编写高性能的 Python 模块。 https://github.com/PyO3…...

编程日记 2023/8/23 22:39:13

linux安装 MySQL8 并配置开机自启动

目录 1.下载 mysql 安装包 2.上传并解压 mysql 3.修改 mysql 文件夹名 4.创建mysql 用户和用户组 5.数据目录 &#xff08;1&#xff09;创建目录 &#xff08;2&#xff09;赋予权限 6.初始化mysql &#xff08;1&#xff09;配置参数 &#xff08;2&#xff09;配置环…...

编程日记 2023/8/23 22:38:11

MySQL视图

一、视图-介绍及基本语法 视图&#xff08;View&#xff09;是一种虚拟存在的表。视图中的数据并不在数据库中实际存在&#xff0c;行和列数据来自定义视图的查询中使用的表&#xff0c;并且是在使用视图时动态生成的。 通俗的讲&#xff0c;视图只保存了查询的SQL逻辑&#xf…...

编程日记 2023/8/23 22:37:10

Pytorch-day05-可视化-checkpoint

PyTorch 可视化 1、模型结构可视化2、训练过程可视化3、模型评估可视化 #导入常用包 import os import numpy as np import torch from torch import nn from torch.utils.data import Dataset, DataLoader from torchvision.transforms import transforms import torchvis…...

编程日记 2023/8/23 22:36:07

中小网站建设都有哪些方案/网络营销学校

学习整理&#xff0c;部分描述来源于网络 1. 概述 1.1 定义 k近邻法&#xff08;k-nearest neighbor&#xff0c;k-NN&#xff09;分类算法是数据挖掘分类技术中最简单的方法之一。所谓K最近邻&#xff0c;就是k个最近的邻居的意思&#xff0c;说的是每个样本都可以用它最接近…...

编程日记 2024/11/17 11:32:16

淘宝的网站怎么做的好处/公司建立网站的步骤

一个端口就是一个潜在的通信通道&#xff0c;也就是一个***通道。对目标计算机进行端口 扫描&#xff0c;能得到许多有用的信息。进行扫描的方法很多&#xff0c;可以是手工进行扫描&#xff0c;也可 以用端口扫描软件进行。 在手工进行扫描时&#xff0c;需要熟悉各种命令。对…...

编程日记 2024/11/17 11:15:59

甘肃建设体网站首页/网络营销

目前项目中使用的是elasticsearch-1.5.1版本&#xff0c;使用到的插件如下&#xff1a; 1. hq 监控&#xff0c;管理elasticsearch集群以及通过web界面来进行查询操作 项目地址&#xff1a; https://github.com/royrusso/elasticsearch-HQ2. analysis-ik ik分词器&#xff0c;中…...

编程日记 2024/11/17 3:43:08

建设网站的基本知识/怎样推广一个产品

目录 一、SD卡简介 1、SDIO简介 2.SD卡物理结构 二、STM32CubeMX建立工程 1.配置管脚 2.点击FATFS&#xff0c;勾选User-defined 3.SYS配置 4.GPIO配置 5.SPI1配置 6.USART1配置 7.时钟树配置 8.修改堆栈大小 三、程序编写 1.源代码下载 2.修改接口里面的内容映…...

编程日记 2024/11/17 2:27:09

网上做衣服的网站有哪些/seo博客网站

要解决JSP乱码,首先就要了解JSP乱码的原因1.架设服务器安装MYSQL时的会让你选择一种编码,如果这种编码与你的网页不一致,可能就会造成JSP页面乱码2.在PHPMYADMIN或mysql-front等系统 创建数据库时会让你选择一种编码,如果这种编码与你的网页不一致,也有可能造成JSP页面乱码3.创…...

编程日记 2024/11/16 21:09:12

网站的软件维护包括什么/百度识图扫一扫

实验9:默认路由所谓的默认路由&#xff0c;是指路由器在路由表中如果找不到到达目的网络的具体路由时&#xff0c;最后会采用的路由。默认路由通常会在存根网络&#xff08;Stub network&#xff0c;即只有一个出口的网络&#xff09;中使用。如图&#xff0c;图中左边的网络到…...

编程日记 2024/11/16 20:39:57