当前位置:网站首页>How to clear floating?
How to clear floating?
2022-07-05 11:57:00 【Xiongba is also】
The influence of floating is not cleared
- The internal height of parent element caused by child floating is 0
- The height of the sibling element of the parent element is 0, Other styles cannot be implemented
Code
<body>
<div class="father">
<div class="child1">child1</div>
<div class="child2">child2</div>
</div>
<div class="friend">friend</div>
</body>
.child1,.child2,.friend{
width:50px;
height:50px;
}
.child1{
float:left;
border:1px solid blue;
}
.child2{
float:left;
border:1px solid green;
}
.friend{
border:1px solid red;
}
.father{
border:1px solid black;
}
Method 1: Add... To the parent element .clearfix
Code
<body>
<div class="father clearfix">
<div class="child1">child1</div>
<div class="child2">child2</div>
</div>
<div class="friend">friend</div>
</body>
.child1,.child2,.friend{
width:50px;
height:50px;
}
.child1{
float:left;
border:1px solid blue;
}
.child2{
float:left;
border:1px solid green;
}
.friend{
border:1px solid red;
}
.father{
border:1px solid black;
}
.clearfix:after{
content: '';
display: block; /* perhaps table*/
clear: both;
}
.clearfix{
zoom: 1; /* IE compatible */
}
design sketch
Method 2: Add... To the parent element overflow:hidden
Code
<body>
<div class="father">
<div class="child1">child1</div>
<div class="child2">child2</div>
</div>
<div class="friend">friend</div>
</body>
.child1,.child2,.friend{
width:50px;
height:50px;
}
.child1{
float:left;
border:1px solid blue;
}
.child2{
float:left;
border:1px solid green;
}
.friend{
border:1px solid red;
}
.father{
border:1px solid black;
overflow:hidden
}
design sketch
边栏推荐
- codeforces每日5题(均1700)-第五天
- Ncp1342 chip substitute pn8213 65W gallium nitride charger scheme
- Sentinel sentinel mechanism of master automatic election in redis master-slave
- COMSOL -- establishment of geometric model -- establishment of two-dimensional graphics
- Acid transaction theory
- 11. (map data section) how to download and use OSM data
- Linux安装部署LAMP(Apache+MySQL+PHP)
- 1 plug-in to handle advertisements in web pages
- C # implements WinForm DataGridView control to support overlay data binding
- Install esxi 6.0 interactively
猜你喜欢
The most comprehensive new database in the whole network, multidimensional table platform inventory note, flowus, airtable, seatable, Vig table Vika, flying Book Multidimensional table, heipayun, Zhix
一次生产环境redis内存占用居高不下问题排查
【yolov5.yaml解析】
yolov5目標檢測神經網絡——損失函數計算原理
COMSOL -- three-dimensional graphics random drawing -- rotation
无线WIFI学习型8路发射遥控模块
简单解决redis cluster中从节点读取不了数据(error) MOVED
多表操作-子查询
[singleshotmultiboxdetector (SSD, single step multi frame target detection)]
mmclassification 训练自定义数据
随机推荐
Vscode shortcut key
《增长黑客》阅读笔记
ACID事务理论
互联网公司实习岗位选择与简易版职业发展规划
你做自动化测试为什么总是失败?
liunx禁ping 详解traceroute的不同用法
【云原生 | Kubernetes篇】Ingress案例实战(十三)
【yolov5.yaml解析】
Halcon 模板匹配实战代码(一)
报错ModuleNotFoundError: No module named ‘cv2.aruco‘
leetcode:1200. Minimum absolute difference
Error assembling WAR: webxml attribute is required (or pre-existing WEB-INF/web.xml if executing in
谜语1
Mongodb replica set
[deploy pytoch project through onnx using tensorrt]
Ncp1342 chip substitute pn8213 65W gallium nitride charger scheme
Redis cluster (master-slave) brain crack and solution
【主流Nivida显卡深度学习/强化学习/AI算力汇总】
多表操作-自关联查询
Hiengine: comparable to the local cloud native memory database engine