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

ops/2024/12/22 10:56:58/

目录

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.ppmy.cn/ops/124075.html

相关文章

iMazing只能苹果电脑吗 Win和Mac上的iMazing功能有区别吗

在当今数字时代&#xff0c;管理和备份手机数据变得越来越重要。无论是转移照片、备份短信&#xff0c;还是管理应用程序&#xff0c;一个强大的工具可以大大简化这些操作。iMazing作为一款备受好评的iOS设备管理软件&#xff0c;已经成为许多用户的选择。但是&#xff0c;许多…

LeetCode hot100---数组及矩阵专题(C++语言)

1、最大子数组和 &#xff08;1&#xff09;题目描述以及输入输出 (1)题目描述: 给你一个整数数组 nums &#xff0c;请你找出一个具有最大和的连续子数组&#xff08;子数组最少包含一个元素&#xff09;&#xff0c;返回其最大和。 (2)输入输出描述&#xff1a; 输入&#…

Linux的基本指令(3)

01. date指令 date 指定格式显示时间&#xff1a; date %Y:%m:%d date 用法&#xff1a;date [OPTION]... [FORMAT] 在显示方面&#xff0c;使用者可以设定欲显示的格式&#xff0c;格式设定为一个加号后接数个标记&#xff0c;其中常用的标记列表如下 %H : 小时 (00..23…

探索 C# 常用第三方库与框架

在 C# 开发中&#xff0c;第三方库和框架极大地提高了开发效率和代码质量。通过这些库&#xff0c;开发者可以快速处理 JSON 数据、简化对象映射、记录日志、以及高效地与数据库交互。本文将介绍四个常用的 C# 第三方库&#xff1a;Newtonsoft.Json、AutoMapper、NLog/Serilog …

linux修改进程名

Linux可以通过两种方法修改进程名 1、//ps 进程名显示a.out&#xff1b;ps -aux显示test123456&#xff1b;killall -9 a.out可以杀掉程序 strcpy(argv[0], "test123456"); 2、 //ps 进程名显示test&#xff1b;ps -aux显示a.out&#xff1b;killall -9 test可以杀…

基于Python的在线音乐平台

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…

分享一个餐饮连锁店点餐系统 餐馆食材采购系统Java、python、php三个版本(源码、调试、LW、开题、PPT)

&#x1f495;&#x1f495;作者&#xff1a;计算机源码社 &#x1f495;&#x1f495;个人简介&#xff1a;本人 八年开发经验&#xff0c;擅长Java、Python、PHP、.NET、Node.js、Android、微信小程序、爬虫、大数据、机器学习等&#xff0c;大家有这一块的问题可以一起交流&…

Qt 5开发步骤及实例

目录 界面设计编写相应的计算圆面积代码 界面设计 创建桌面应用程序 得到这样一个树形视图 双击界面文件中的dialog.ui 直接双击控件label改名&#xff0c;然后修改最后一个label的属性 修改这个标签的样式&#xff0c;把frameshape改成Panel&#xff0c;frameshadow改…