当前位置:网站首页>学习探索-使用伪元素清除浮动元素造成的高度坍塌
学习探索-使用伪元素清除浮动元素造成的高度坍塌
2022-07-06 11:32:00 【miao_zz】
效果示例图
代码块
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动元素造成的高度坍塌</title>
<style type="text/css">
.container-noclear {
border: 1px solid red;
width: 500px;
margin: 50px auto;
}
.container {
border: 1px solid red;
width: 500px;
margin: 50px auto;
}
.container::after {
content: "";
clear: both;
display: block;
}
.items {
border: 1px solid #00a2ef;
width: 100px;
height: 100px;
margin: 11px 11px;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>
<div class="items">6</div>
<div class="items">7</div>
</div>
<div class="container-noclear">
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>
<div class="items">6</div>
<div class="items">7</div>
</div>
</body>
</html>
边栏推荐
- 思维导图+源代码+笔记+项目,字节跳动+京东+360+网易面试题整理
- R language uses the order function to sort the dataframe data, and descending sorting based on a single field (variable)
- Reptiles have a good time. Are you full? These three bottom lines must not be touched!
- A method of removing text blur based on pixel repair
- AIRIOT物联网平台赋能集装箱行业构建【焊接工位信息监控系统】
- Sanmian ant financial successfully got the offer, and has experience in Android development agency recruitment and interview
- 打家劫舍III[后序遍历与回溯+动态规划]
- tensorflow和torch代码验证cuda是否安装成功
- C # - realize serialization with Marshall class
- About static type, dynamic type, ID, instancetype
猜你喜欢
Xingnuochi technology's IPO was terminated: it was planned to raise 350million yuan, with an annual revenue of 367million yuan
How to type multiple spaces when editing CSDN articles
AutoCAD - what is the default lineweight for centerline drawing and CAD? Can I modify it?
zabbix 代理服务器 与 zabbix-snmp 监控
Benefit a lot, Android interview questions
Detailed idea and code implementation of infix expression to suffix expression
A popular explanation will help you get started
冒烟测试怎么做
五金机电行业供应商智慧管理平台解决方案:优化供应链管理,带动企业业绩增长
Interface test tool - postman
随机推荐
多线程基础:线程基本概念与线程的创建
深入分析,Android面试真题解析火爆全网
能源行业的数字化“新”运维
ACTF 2022圆满落幕,0ops战队二连冠!!
QLabel 跑马灯文字显示
Interface test tool - postman
关于图像的读取及处理等
今日直播 | “人玑协同 未来已来”2022弘玑生态伙伴大会蓄势待发
Mathematical knowledge -- code implementation of Gaussian elimination (elementary line transformation to solve equations)
CPU负载很低,loadavg很高处理方法
Lucun smart sprint technology innovation board: annual revenue of 400million, proposed to raise 700million
2022.2.12
A popular explanation will help you get started
Interview assault 63: how to remove duplication in MySQL?
Word如何显示修改痕迹
When visual studio code starts, it prompts "the code installation seems to be corrupt. Please reinstall." Solution to displaying "unsupported" information in the title bar
渲大师携手向日葵,远控赋能云渲染及GPU算力服务
test about BinaryTree
Documents to be used in IC design process
spark基础-scala