当前位置:网站首页>清除浮动的方式
清除浮动的方式
2022-07-06 05:33:00 【雷haoming】
问题
html:
<div class="f-box">
<div class="box1"></div>
<div class="box2"></div>
</div>
css:
.f-box {
background-color: pink;
}
.box1, .box2 {
width: 200px;
height: 200px;
}
.box1 {
float: left;
background: tomato;
}
.box2 {
float: left;
background: greenyellow;
}
效果:
父元素没有被撑开,所以没有显示出来。
解决办法
一、添加空标签
在元素末尾加一个空标签并且设置样式clear: both
html:
<div class="f-box">
<div class="box1"></div>
<div class="box2"></div>
<div style="clear: both"></div>
</div>
二、将父元素设置为BFC
设置父元素样式overflow: hidden;
或者display: flex;
等等。创建BFC
.f-box {
background-color: pink;
overflow: hidden;
}
三、使用伪元素
设置父元素after
伪元素清除浮动
其实这种方式类似第一种,只是用为元素代替了空标签
.f-box::after{
content:'';
display:block;
height:0;
clear:both;
visibility:hidden;
}
解决后
边栏推荐
- Closure, decorator
- The ECU of 21 Audi q5l 45tfsi brushes is upgraded to master special adjustment, and the horsepower is safely and stably increased to 305 horsepower
- 网站进行服务器迁移前应做好哪些准备?
- Vulhub vulnerability recurrence 71_ Unomi
- Check the useful photo lossless magnification software on Apple computer
- 算法-- 爬楼梯(Kotlin)
- Force buckle 1189 Maximum number of "balloons"
- P2802 回家
- Jvxetable用slot植入j-popup
- 【SQL server速成之路】——身份验证及建立和管理用户账户
猜你喜欢
【经验】win11上安装visio
Easy to understand IIC protocol explanation
02. 开发博客项目之数据存储
[JVM] [Chapter 17] [garbage collector]
Vulhub vulnerability recurrence 72_ uWSGI
28io stream, byte output stream writes multiple bytes
The ECU of 21 Audi q5l 45tfsi brushes is upgraded to master special adjustment, and the horsepower is safely and stably increased to 305 horsepower
Steady, 35K, byte business data analysis post
什么是独立IP,独立IP主机怎么样?
趋势前沿 | 达摩院语音 AI 最新技术大全
随机推荐
Fluent implements a loadingbutton with loading animation
[QNX hypervisor 2.2 user manual]6.3.3 using shared memory (shmem) virtual devices
Cuda11.1 online installation
Pix2pix: image to image conversion using conditional countermeasure networks
js Array 列表 实战使用总结
ArcGIS应用基础4 专题图的制作
Easy to understand I2C protocol
Modbus协议通信异常
04. 项目博客之日志
Check the useful photo lossless magnification software on Apple computer
【经验】UltralSO制作启动盘时报错:磁盘/映像容量太小
01. 开发博客项目之项目介绍
The ECU of 21 Audi q5l 45tfsi brushes is upgraded to master special adjustment, and the horsepower is safely and stably increased to 305 horsepower
Summary of deep learning tuning tricks
RustDesk 搭建一个自己的远程桌面中继服务器
2022半年总结
Figure database ongdb release v-1.0.3
Text classification still stays at Bert? The dual contrast learning framework is too strong
Easy to understand IIC protocol explanation
【华为机试真题详解】统计射击比赛成绩