CSS 布局——清除浮动 (二)

目录

1. 清除浮动

2. 清除浮动本质

3. 清除浮动

4. 清除浮动方法

4.1 额外标签法

4.1.1 总结

4.2 父级添加 overflow

 4.3 after 伪元素法

 4.4 双伪元素清除浮动

5 总结


1. 清除浮动

 

 

这是上面的源代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 不给高度,只给宽度,其中的内容会撑开外面的大盒子 */.box {background-color: bisque;width: 600px;border: 5px red solid;}/* 添加浮动后,不给高度的大盒子高度为 0,因为浮动的元素不占有位置 */.one,.two {width: 200px;height: 200px;background-color: aquamarine;float: left;}/* 布局再添加一个 footer,布局就会更加乱 */.footer {height: 200px;background-color: burlywood;}</style>
</head>
<body><div class="box"><div class="one">111</div><div class="two">222</div></div><div class="footer"></div>
</body>
</html>

2. 清除浮动本质

3. 清除浮动

4. 清除浮动方法

4.1 额外标签法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 不给高度,只给宽度,其中的内容会撑开外面的大盒子 */.box {background-color: bisque;width: 600px;border: 5px red solid;}/* 添加浮动后,不给高度的大盒子高度为 0,因为浮动的元素不占有位置 */.one,.two {width: 200px;height: 200px;background-color: aquamarine;float: left;}/* 布局再添加一个 footer,布局就会更加乱 */.footer {height: 200px;background-color: burlywood;}.cle {clear: both;}</style>
</head>
<body><div class="box"><div class="one">111</div><div class="two">222</div><div class="cle"></div></div><div class="footer"></div>
</body>
</html>
4.1.1 总结

4.2 父级添加 overflow

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 不给高度,只给宽度,其中的内容会撑开外面的大盒子 */.box {overflow: hidden;background-color: bisque;width: 600px;border: 5px red solid;}/* 添加浮动后,不给高度的大盒子高度为 0,因为浮动的元素不占有位置 */.one,.two {width: 200px;height: 200px;background-color: aquamarine;float: left;}.footer {height: 200px;background-color: burlywood;}</style>
</head>
<body><div class="box"><div class="one">111</div><div class="two">222</div></div><div class="footer"></div>
</body>
</html>

 4.3 after 伪元素法

使用时直接复制以下代码即可:

.clearfix:after {content:"";display: block;height: 0;clear: both;visibility: hidden;}/*  .clearfix {*zoom: 1;} */
 4.4 双伪元素清除浮动

 使用时直接复制以下代码即可:

.clearfix:before,.clearfix:after {content: "";display: table;}.clearfix:after {clear: both;}/*  .clearfix {*zoom: 1;}  */
5 总结

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【FPGA开发】Modelsim如何给信号分组

前面已经发布过了一篇关于 Modelsim 的入门使用教程&#xff0c;针对的基本是只有一个源文件加一个仿真tb文件的情况&#xff0c;而实际的工程应用中&#xff0c;往往是顶层加多个底层的源文件结构&#xff0c;如果不对信号进行一定的分组&#xff0c;就会显得杂乱不堪&#xf…

第33次CCF计算机软件能力认证-第4题十滴水

题干&#xff1a; 十滴水是一个非常经典的小游戏。 小 C C C 正在玩一个一维版本的十滴水游戏。 我们通过一个例子描述游戏的基本规则。 游戏在一个 1 c 1c 1c 的网格上进行&#xff0c;格子用整数 x ( 1 ≤ x ≤ c ) x(1≤x≤c) x(1≤x≤c) 编号&#xff0c;编号从左往…

Python学习-函数

函数 文章目录 函数定义与调用参数传递内存分析返回值参数定义默认值参数个数可变的参数关键字参数 变量的作用域 匿名函数基本语法示例lambda与排序高阶函数map函数reduce函数filter函数 多关键字排序 定义与调用 函数可以嵌套用 先定义后调用 def calc(a,b):cabreturn cre…

一台电脑轻松接入CANFD总线_来可CNA板卡介绍

在工业控制领域&#xff0c;常常使用的总线技术有CAN(FD)、RS-232、RS-485、Modbus、Profibus、Profinet、EtherCAT等。RS-485以其长距离通信能力著称&#xff0c;Modbus广泛应用于PLC等设备&#xff0c;EtherCAT则以其低延迟和高实时性在自动化系统中备受青睐。 其中&#xff…

Java虚拟机(JVM)介绍

**Java虚拟机&#xff08;JVM&#xff09;**是Java平台的核心组件&#xff0c;它提供了一个运行时环境&#xff0c;使得Java程序可以在不同的操作系统和硬件平台上运行而无需修改。 JVM的架构 JVM主要由以下几个部分组成&#xff1a; 类加载器&#xff08;Class Loader&#xf…

对后端返回的日期属性进行格式化(扩展 Spring MVC 的消息转换器)

格式化之前 格式化之后&#xff1a; 解决方式 方式一 在属性中加上注解&#xff0c;对日期进行格式化 JsonFormat(pattern "yyyy-MM-dd HH:mm:ss")private LocalDateTime createTime;//JsonFormat(pattern &quo…

小白必看web专题!PHP-WebShell免杀(基础版)!!真的很简单!(全网最详细版本)

大家好&#xff0c;我是Dest1ny&#xff01; 最近一直在搞辅导啥的&#xff0c;所以没啥时间搞写&#xff5e; 也谢谢大家一直的点赞&#xff0c;今天特意把之前的web专题再发一个。 废话不多说&#xff0c;我们直接开始&#xff01; CLASS-1 WebShell免杀测试 渊龙Sec团队导…

「Ubuntu」根目录存储空间不足

Linux系统不同于 Windows系统&#xff0c;复杂的文件系统常常让人头疼&#xff0c;特别是动不动就存储空间不足&#xff0c;简单的清空回收站根本不管用&#xff0c;在此推荐一个绝对好用的方法&#xff0c;并且还可以多学习一条 Linux命令 1、du 使用方法 通过使用命令 du&am…

Ubuntu24.04 安装 NCAR Command Language(NCL)

目录 一般直接在Terminal中使用apt安装命令即可&#xff0c; 出现这样的问题&#xff0c; 如何解决这个问题呢&#xff1f; 一般直接在Terminal中使用apt安装命令即可&#xff0c; sudo apt install ncl-ncarg 但是&#xff0c;由于 Ubuntu 版本较新 Ubuntu 24.04&#xff…

【Next.js 入门教程系列】07-身份验证

原文链接 CSDN 的排版/样式可能有问题&#xff0c;去我的博客查看原文系列吧&#xff0c;觉得有用的话&#xff0c; 给我的库点个star&#xff0c;关注一下吧 上一篇【Next.js 入门教程系列】06-上传文件 身份验证 本篇包括以下内容: Setting up Next AuthConfiguring the G…

基于Spring Boot的医疗病历交互系统开发指南

第2章 设计技术与开发环境 2.1 相关技术介绍 2.1.1 B/S模式分析 C/S模式主要由客户应用程序(Client)、服务器管理程序(Server)和中间件(middleware)三个部件组成。客户应用程序是系统中用户与数据组件交互。服务器程序负责系统资源&#xff0c;如管理信息数据库的有效管理&…

使用Docker搭建WAF-开源Web防火墙VeryNginx

1、说明 VeryNginx 基于 lua_nginx_module(openrestry) 开发,实现了防火墙、访问统计和其他的一些功能。 集成在 Nginx 中运行,扩展了 Nginx 本身的功能,并提供了友好的 Web 交互界面。 文章目录 1、说明1.1、基本概述1.2、主要功能1.3、应用场景2、拉取镜像3、配置文件4、…

kafka-manager修改zookeeper端口号后启动仍然连接2181端口

问题描述&#xff1a; zookeeper默认端口号修改为了2182&#xff0c;kafka-manager的配置文件application.conf中也已经修改了zkhosts为新的端口号&#xff0c;然而启动kafka-manger时报错连接连接超时&#xff0c;发现连接的还是2181端口&#xff0c;很奇怪&#xff1f;&…

【D3.js in Action 3 精译_029】3.5 给 D3 条形图加注图表标签(上)

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第一部分 D3.js 基础知识 第一章 D3.js 简介&#xff08;已完结&#xff09; 1.1 何为 D3.js&#xff1f;1.2 D3 生态系统——入门须知1.3 数据可视化最佳实践&#xff08;上&#xff09;1.3 数据可…

C++题 十进制转二进制

文章目录 1. 使用C20 std::format2. 使用 std::bitset 类3. 手动实现十进制到二进制的转换反过来&#xff0c;手动二进制到十进制 VisualStudio2022使用C&#xff0c;进行十进制到二进制的转换&#xff0c;常见的实现方式 1. 使用C20 std::format 需要将VisualStudio默认的标准…

Linux高阶——0928—Github本地仓库与云端仓库关联

1、安装代理软件 steam 选择Github和系统代理模式&#xff0c;一键加速即可 2、 安装Git 3、访问Github网站&#xff0c;创建新用户 4、Github探索 &#xff08;1&#xff09;Explore探索标签 &#xff08;2&#xff09;工程结构 用户名/仓库名 自述文件&#xff0c;用markdo…

【笔记】I/O总结王道强化视频笔记

文章目录 从中断控制器的角度来理解整个中断处理的过程复习 处理器的中断处理机制**中断驱动I/O方式** printf——从系统调用到I/O控制方式的具体实现1轮询方式下输出一个字符串(程序查询)中断驱动方式下输出一个字符串中断服务程序中断服务程序与设备驱动程序之间的关系 DMA方…

线性代数在大一计算机课程中的重要性

线性代数在大一计算机课程中的重要性 线性代数是一门研究向量空间、矩阵运算和线性变换的数学学科&#xff0c;在计算机科学中有着广泛的应用。大一的计算机课程中&#xff0c;线性代数的学习为学生们掌握许多计算机领域的关键概念打下了坚实的基础。本文将介绍线性代数的基本…

数据库——创立表和库

数据库&#xff08;Database&#xff09;是一个用于存储、管理和检索数据的系统。它可以组织结构化数据&#xff0c;支持高效的存取和操作。数据库通常由一个数据库管理系统&#xff08;DBMS&#xff09;来支持&#xff0c;常见的DBMS包括&#xff1a; 关系数据库&#xff08;R…

Java创建型模式(二)——工厂模式(简单工厂模式、工厂方法模式、抽象工厂模式、工厂模式扩展等完整详解,附有代码——案例)

文章目录 五.工厂模式5.1 概述5.2简单工厂模式5.2.1 概述5.2.2 结构5.2.3 实现5.2.4 优缺点5.2.5 扩展—静态工厂 5.3 工厂方法模式5.3.1概述5.3.2 结构5.3.3 实现5.3.4 优缺点 5.4 抽象工厂模式5.4.1 概述5.4.2 结构5.4.3 实现5.4.4 优缺点5.4.5 使用场景 5.5 工厂模式扩展 五…