【CSS】清除浮动 ④ ( 清除浮动 - 使用双伪元素清除浮动 | 代码示例 )

文章目录

  • 一、清除浮动 - 使用双伪元素清除浮动
  • 二、代码示例





一、清除浮动 - 使用双伪元素清除浮动



.clearfix:before.clearfix:after 并集选择器 , 设置如下样式 :

		/* 清除浮动 - 使用双伪元素清除浮动 */
		.clearfix:before,
		.clearfix:after {
			content: "";
			display: table;
		}

.clearfix:after 伪类选择器设置如下样式 :

.clearfix:after 伪元素选择器 的含义是 在 该父容器盒子 的内部 , 插入新的子元素 , 该子元素设置选择器中的样式 ;

		.clearfix:after {
			clear: both;
		}


低版本浏览器 IE6 / IE7 清除浮动样式 :

		.clearfix {
			*zoom: 1;
		}

声明完上述元素后 , 在需要清除浮动元素的 父容器 中 , 声明 clearfix 类 ;

	<div class="father1 clearfix">
		<div class="son1"></div>
		<div class="son2"></div>
	</div>




二、代码示例



代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>清除浮动 - 使用双伪元素清除浮动</title>
	<style>
		/* 清除标签默认的内外边距 */
		* {
		   padding: 0;     
		   margin: 0;
		}
		
		/* 清除列表默认样式 ( 主要是前面的点 ) */
		li {
			list-style: none;
		}
		
		/* 设置总体背景 */
		body {
			background-color: #f4f4f4;
		}
		
		/* 插入图片自适应 */
		img {
			width: 100%;
		}
		
		/* 下面是正式内容 */
		
		/* 清除浮动 - 使用双伪元素清除浮动 */
		.clearfix:before,
		.clearfix:after {
			content: "";
			display: table;
		}
		.clearfix:after {
			clear: both;
		}
		.clearfix {
			*zoom: 1;
		}
		
		/* 清除浮动 - 使用 after 伪元素 ( 方法三 : 最流行写法 ) */
		/*.clearfix:after {
			content: "";
			display: block;
			height: 0;
			visibility: hidden;
			clear: both;
		}*/
		
		/* 低版本浏览器 IE6 / IE7 清除浮动样式 */
		/*.clearfix {
			*zoom: 1;  
		}*/
		
		/* 父容器 1 没有指定高度 , 默认 0 像素 */
		.father1 {
			width: 500px;
			background-color: pink;
			border: 2px solid green;
			
			/* 清除浮动 - 父级元素设置 overflow 样式 ( 方法二 ) */
			/*overflow: hidden;*/
		}
		
		/* 子元素 1 */
		.son1 {
			float: left;
			width: 200px;
			height: 200px;
			background-color: blue;
		}
		
		/* 子元素 2 */
		.son2 {
			float: left;
			width: 250px;
			height: 250px;
			background-color: red;
		}
		
		/* 父容器 2 - 父容器 1 的兄弟元素 */
		.father2 {
			width: 700px;
			height: 150px;
			background-color: purple;
		}
		
		/* 清除浮动 - 额外标签法 ( 方法一 ) */
		/*.son3 {
			clear: both;
		}*/
	</style>
</head>
<body>
	<div class="father1 clearfix">
		<div class="son1"></div>
		<div class="son2"></div>
	</div>
	<div class="father2"></div>
</body>
</html>

显示效果 :

在这里插入图片描述

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

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

相关文章

ERTEC200P-2 PROFINET设备完全开发手册(1)

本教程为ERTEC200P-2的基础开发教程&#xff0c;可以掌握PN设备开发的基本流程。虽然没有涉及PN协议的详细解析&#xff0c;但是希望根据本文档多多练习&#xff0c;熟能生巧&#xff0c;逐渐能够掌握PN设备开发。 &#xff08;注意&#xff1a;本手册基于西门子DEVKIT V47协议…

oracle导入的表中文名称乱码无法删除导致删除用户也失败

由于一开始弄数据库的时候忘记设置编码格式&#xff0c; 导致导入dmp文件之后带中文的表名变成了乱码 然后plsql右键删除表显示表不存在 一开始的时候寻思备份下表结构跟表数据 直接删除用户完事了 删除用户报递归遍历错误 寻思重装这个数据库太过于耗时 不值当的 就是看那几…

【JWT鉴权】如何来写一个token令牌认证登录?

目录一. &#x1f981; 话题引入1.2 什么是JWT&#xff1f;二. &#x1f981; 技术体现2.1 引入依赖2.2 编写JWT工具类2.3 编写登录方法2.4 编写JWT拦截器验证令牌2.5 编写要配置拦截的接口三. &#x1f981; 话题终结一. &#x1f981; 话题引入 在做项目过程中&#xff0c;我…

【halcon】为啥匹配到ROI外面去了?

背景 匹配到ROI外面去了 中心恰好在roi有效区域内&#xff01;&#xff08;粉色是ROI区域&#xff09; 网上查到的资料&#xff01; PaintRegion改变外部环境 //HOperatorSet.ReduceDomain(image, ho_ProductRegionAll, out imgReduced); //替换为&#xff1a; HObject all…

Web前端 HTML、CSS

HTML与CSSHTML、CSS思维导图一、HTML1.1、HTML基础文本标签1.2、图片、音频、视频标签1.3、超链接、表格标签1.4、布局1.5、表单标签1.6、表单项标签综合使用1.7、HTML小结二、CSS&#xff08;简介&#xff09;2.1、引入方式2.2、选择器2.3、CSS属性Web前端开发总览 Html&…

Linux基础操作 常用命令 Centos

Linux 1.Linux的引言 Linux是一套免费使用和自由传播的类Unix操作系统&#xff0c;是一个基于POSIX和Unix的多用户、多任务、支持多线程和多CPU的操作系统。伴随着互联网的发展&#xff0c;Linux得到了来自全世界软件爱好者、组织、公司的支持。它除了在服务器操作系统方面保持…

面试题-学习网络协议必备:七层模型与协议之间的映射关系

一、概念 OSI七层模型是计算机网络中的一种标准化分类和描述方式&#xff0c;它将网络协议划分为不同的层次&#xff0c;每个层次负责不同的功能。这种模型被广泛应用于网络设计、开发和维护&#xff0c;以便于不同系统之间的互操作性和相互通信。 二、各层介绍 第一层&#x…

vue项目代理配置大全

1.vite &#xff08;vue3-admin-element-template-master&#xff09; server: {host: 0.0.0.0, //服务器ip地址 port: 5566, //本地端口fs: {strict: false, // 支持引用除入口目录的文件},open: true, // 是否自动在浏览器打开proxy: {/pcapi: {target: https:....../pcapi…

老板想要可视化大屏?零代码开发3D可视化大屏,只要10分钟

上周末和供应链管理的朋友一起喝茶&#xff0c;我吐槽着我做报表的繁琐&#xff0c; 他用很疑惑的眼神看着我说&#xff1a;这事不是在模板上改改数据就行了吗&#xff1f;我连忙逼他给我分享了这个香饽饽。 回到家&#xff0c;我直接开始研究起了可视化大屏&#xff0c;后悔自…

Android告别Shape.xml

天下苦shape.xml久已&#xff0c;特别是遇上不靠谱的UI&#xff0c;圆角背景色边框&#xff0c;三个属性就能给你折腾出来几百种组合&#xff0c;每个组合都要写对应的shape.xml&#xff0c;太折腾人了&#xff01; 展示 效果图 代码 /*** 设置shape*/ BindingAdapter(// 圆角…

44学习自动化运维工具 Chef 的基本用法,包括厨师编写、节点管理

Chef是一种自动化运维工具&#xff0c;它允许您定义基础设施的状态&#xff0c;并根据需要管理这些状态。在这里&#xff0c;我们将学习Chef的基本用法&#xff0c;包括如何编写和管理Cookbook和Node。 安装Chef 在使用Chef之前&#xff0c;您需要在管理节点和目标节点上安装…

图最短路径算法

图最短路径算法迪杰斯特拉算法弗洛伊德算法BFS迪杰斯特拉算法 求原点0到其他点的最短路径 #include<iostream> #include<vector> #include<string.h> #define N 10 #define INF 65535 using namespace std;int graph[N][N]; int dist[N]; int parent[N];/…

达梦数据库DISQL常用命令

1.帮助 HELP 作用&#xff1a;可以帮助用户查看其他命令的具体用法。用户可以看到其他命令系统显示的内容。 语法如下&#xff1a; HELP <command> 示例如下&#xff1a; 2.输出文件 SPOOL 作用&#xff1a;将屏幕显示的内容输出到指定文件 语法如下&#xff1a; …

JVM 类的加载过程

文章目录1 类的生命周期2 类加载过程2.1 加载2.2 验证2.3 准备2.4 解析2.5 初始化3 类卸载1 类的生命周期 类从被加载到虚拟机内存中开始到卸载出内存为止&#xff0c;它的整个生命周期可以简单概括为 7 个阶段&#xff1a;&#xff1a;加载&#xff08;Loading&#xff09;、…

和开振学Spring boot 3.0之Spring MVC:③Spring MVC的配置

我们前面两篇做了基本的开发&#xff0c;相信大家对Spring MVC的流程有了基本的了解&#xff0c;这些我们来确认一下一些细节。 1、Spring MVC是如何初始化的 在Servlet 3.0规范中&#xff0c;web.xml再也不是一个必需的配置文件。为了适应这个规范&#xff0c;Spring MVC从3…

【数据结构】七种常见的排序

目录 1、排序的概念即运用 1.1、排序的概念 1.2、常见排序算法的分类 2、插入排序 2.1、排序原理 2.2、直接插入排序 2.3、希尔排序&#xff08;缩小增量排序&#xff09; 3、选择排序 3.1、直接选择排序 3.2、堆排序 4、选择排序 4.1、冒泡排序 4.2、快速排序 …

Android---Jetpack之Room

目录 应用实现 数据库升级 异常处理 Schema 文件 销毁和重建策略 预填充数据库 Android 采用 SQLite 作为数据库存储&#xff0c;开源社区常见的 ORM(Object Relational Mapping)库有ORMLite、GreenDAO等。Room 和其它库一样&#xff0c;也是在 SQLite 上提供了一层封装。…

一文懂交叉熵Cross-Entropy

本文翻译自https://naokishibuya.medium.com/demystifying-cross-entropy-e80e3ad54a8 交叉熵由交叉&#xff08;Cross&#xff09;和熵&#xff08;Entropy&#xff09;两部分组成&#xff0c;在机器学习中常常被定义为损失函数的目标。在二分类任务中&#xff0c;更有二分类交…
最新文章