当前位置:网站首页>Learn to explore - use pseudo elements to clear the high collapse caused by floating elements
Learn to explore - use pseudo elements to clear the high collapse caused by floating elements
2022-07-06 19:30:00 【miao_ zz】
Use pseudo elements to clear the high collapse caused by floating elements
Effect example picture
Code block
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> High collapse caused by removing floating elements </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>
边栏推荐
- [translation] micro survey of cloud native observation ability. Prometheus leads the trend, but there are still obstacles to understanding the health of the system
- Unbalance balance (dynamic programming, DP)
- 如何自定义动漫头像?这6个免费精品在线卡通头像生成器,看一眼就怦然心动!
- ZABBIX proxy server and ZABBIX SNMP monitoring
- Is not a drawable (color or path): the vector graph downloaded externally cannot be called when it is put into mipmap, and the calling error program crashes
- 包装行业商业供应链管理平台解决方案:布局智慧供应体系,数字化整合包装行业供应链
- 通俗的讲解,带你入门协程
- 在解决了 2961 个用户反馈后,我做出了这样的改变...
- CCNP Part 11 BGP (III) (essence)
- 打家劫舍III[后序遍历与回溯+动态规划]
猜你喜欢
史上超级详细,想找工作的你还不看这份资料就晚了
Help improve the professional quality of safety talents | the first stage of personal ability certification and assessment has been successfully completed!
Problems encountered in using RT thread component fish
Live broadcast today | the 2022 Hongji ecological partnership conference of "Renji collaboration has come" is ready to go
Low CPU load and high loadavg processing method
Zero foundation entry polardb-x: build a highly available system and link the big data screen
Pychrm Community Edition calls matplotlib pyplot. Solution of imshow() function image not popping up
凤凰架构3——事务处理
Mysql Information Schema 学习(一)--通用表
五金机电行业供应商智慧管理平台解决方案:优化供应链管理,带动企业业绩增长
随机推荐
Simple application of VBA script in Excel
LeetCode_格雷编码_中等_89.格雷编码
Tensorflow and torch code verify whether CUDA is successfully installed
Mysql Information Schema 学习(二)--Innodb表
学习探索-使用伪元素清除浮动元素造成的高度坍塌
CCNP Part 11 BGP (III) (essence)
[translation] linkerd's adoption rate in Europe and North America exceeded istio, with an increase of 118% in 2021.
凤凰架构2——访问远程服务
学习探索-无缝轮播图
Unbalance balance (dynamic programming, DP)
反射及在运用过程中出现的IllegalAccessException异常
Take a look at how cabloyjs workflow engine implements activiti boundary events
Analysis of frequent chain breaks in applications using Druid connection pools
Synchronous development of business and application: strategic suggestions for application modernization
Interview assault 63: how to remove duplication in MySQL?
凤凰架构3——事务处理
Characteristic colleges and universities, jointly build Netease Industrial College
Computer network: sorting out common network interview questions (I)
Pychrm Community Edition calls matplotlib pyplot. Solution of imshow() function image not popping up
MySQL information schema learning (I) -- general table