当前位置:网站首页>Clear floating mode
Clear floating mode
2022-07-06 05:42:00 【Lei Haoming】
problem
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;
}
effect :
The parent element is not opened , So it doesn't show up .
terms of settlement
One 、 Add an empty tag
Add an empty label at the end of the element and set the style clear: both
html:
<div class="f-box">
<div class="box1"></div>
<div class="box2"></div>
<div style="clear: both"></div>
</div>
Two 、 Set the parent element to BFC
Set the parent element style overflow: hidden;
perhaps display: flex;
wait . establish BFC
.f-box {
background-color: pink;
overflow: hidden;
}
3、 ... and 、 Use pseudo elements
Set parent element after
Pseudo-element clears the float
In fact, this method is similar to the first one , Just use as element instead of empty tag
.f-box::after{
content:'';
display:block;
height:0;
clear:both;
visibility:hidden;
}
After the solution
边栏推荐
- 【华为机试真题详解】检查是否存在满足条件的数字组合
- Redis message queue
- Algorithm -- climbing stairs (kotlin)
- 04. Project blog log
- [Jiudu OJ 08] simple search x
- Deep learning -yolov5 introduction to actual combat click data set training
- 类和对象(一)this指针详解
- RustDesk 搭建一个自己的远程桌面中继服务器
- [experience] install Visio on win11
- B站刘二大人-数据集及数据加载 Lecture 8
猜你喜欢
随机推荐
指針經典筆試題
2022半年总结
[SQL Server fast track] - authentication and establishment and management of user accounts
YYGH-11-定时统计
HAC集群修改管理员用户密码
什么是独立IP,独立IP主机怎么样?
Codeless June event 2022 codeless Explorer conference will be held soon; AI enhanced codeless tool launched
B站刘二大人-反向传播
大型网站如何选择比较好的云主机服务商?
改善Jpopup以实现动态控制disable
网站进行服务器迁移前应做好哪些准备?
Detailed summary of SQL injection
实践分享:如何安全快速地从 Centos迁移到openEuler
数字经济破浪而来 ,LTD是权益独立的Web3.0网站?
C Advanced - data storage (Part 1)
27io stream, byte output stream, OutputStream writes data to file
JS array list actual use summary
Questions d'examen écrit classiques du pointeur
Garbage collector with serial, throughput priority and response time priority
Vulhub vulnerability recurrence 68_ ThinkPHP