当前位置:网站首页>Several ways to clear floating
Several ways to clear floating
2022-07-07 12:35:00 【Xiaoding Chong duck!】
Three column layout , Both use floating , Causes the parent element to collapse highly , The effect is as follows :
The code is as follows :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello</title>
</head>
<style>
.parent {
border: 3px #ffaaa7 solid;
}
.child {
height: 300px;
}
.child:nth-child(1) {
width: 200px;
float: left;
background-color: #98ddca;
}
.child:nth-child(2) {
background-color:#d5ecc2;
width: calc(100% - 400px);
float: left;
}
.child:nth-child(3) {
background-color:#ffd3b4;
width: 200px;
float: right;
}
</style>
<body>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
</body>
</html>
Clear the float to achieve the effect :
One 、 Pseudo elements
It is equivalent to adding a block level element , And set up clear:both
.parent:after {
content: '';
display: block;
clear: both;
}
Two 、clear
You can add clear, In this case , Because of three child Elements are floating , So add an empty one at the end div, And then add clear:both that will do
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div style="clear:both"></div>
</div>
3、 ... and 、 Parent div Definition overflow:hidden
Parent element Settings overflow:hidden( except "visible" Any valid value other than ) After that, the parent element will form a BFC, and BFC The height of is the height containing the internal floating elements
.parent {
border: 3px #ffaaa7 solid;
overflow: hidden;
}
In fact, all can make the parent element produce BFC Can solve the problem , But some will cause additional problems .
边栏推荐
- 【PyTorch实战】用RNN写诗
- Financial data acquisition (III) when a crawler encounters a web page that needs to scroll with the mouse wheel to refresh the data (nanny level tutorial)
- wallys/Qualcomm IPQ8072A networking SBC supports dual 10GbE, WiFi 6
- SQL Lab (36~40) includes stack injection, MySQL_ real_ escape_ The difference between string and addslashes (continuous update after)
- Apache installation problem: configure: error: APR not found Please read the documentation
- Will the filing free server affect the ranking and weight of the website?
- idea 2021中文乱码
- Completion report of communication software development and Application
- Baidu digital person Du Xiaoxiao responded to netizens' shouts online to meet the Shanghai college entrance examination English composition
- [pytorch practice] image description -- let neural network read pictures and tell stories
猜你喜欢
@What happens if bean and @component are used on the same class?
An error occurred when vscade tried to create a file in the target directory: access denied [resolved]
The hoisting of the upper cylinder of the steel containment of the world's first reactor "linglong-1" reactor building was successful
RHSA first day operation
SQL lab 21~25 summary (subsequent continuous update) (including secondary injection explanation)
Vxlan 静态集中网关
In the small skin panel, use CMD to enter the MySQL command, including the MySQL error unknown variable 'secure_ file_ Priv 'solution (super detailed)
The IDM server response shows that you do not have permission to download the solution tutorial
SQL Lab (46~53) (continuous update later) order by injection
Static routing assignment of network reachable and telent connections
随机推荐
2022-07-07日报:GAN发明者Ian Goodfellow正式加入DeepMind
leetcode刷题:二叉树23(二叉搜索树中的众数)
利用栈来实现二进制转化为十进制
Solve server returns invalid timezone Go to ‘Advanced’ tab and set ‘serverTimezone’ property manually
SQL injection -- Audit of PHP source code (take SQL lab 1~15 as an example) (super detailed)
How much does it cost to develop a small program mall?
普乐蛙小型5d电影设备|5d电影动感电影体验馆|VR景区影院设备
SQL Lab (46~53) (continuous update later) order by injection
消息队列消息丢失和消息重复发送的处理策略
@What happens if bean and @component are used on the same class?
通讯协议设计与实现
盘点JS判断空对象的几大方法
SQL head injection -- injection principle and essence
数据库系统原理与应用教程(011)—— 关系数据库
Routing strategy of multi-point republication [Huawei]
111. Network security penetration test - [privilege escalation 9] - [windows 2008 R2 kernel overflow privilege escalation]
Pule frog small 5D movie equipment | 5D movie dynamic movie experience hall | VR scenic area cinema equipment
The hoisting of the upper cylinder of the steel containment of the world's first reactor "linglong-1" reactor building was successful
MPLS experiment
Several methods of checking JS to judge empty objects