CSS笔记之清除浮动
CSS学习之清除浮动
一:为什么要清除浮动
在实际开发中,我们的子元素包含在父级盒子中,然而子元素设置了浮动,脱离了标准流,而我们又不方便给父级盒子一个固定的高度,所以就会导致父级盒子因为没有高度,而出现布局问题,所以我们需要用到一个方法,既不会影响布局,子元素又能浮动,所以就需要设置清除浮动对父级盒子的影响
二:清除浮动的方法
1:清除浮动的方法
方法 | 属性 | 解释 |
---|---|---|
添加额外标签法 | style{clear:both} | 在浮动的最后一个盒子处,添加一个空标签并设置样式 |
父级盒子添加样式 | overflow: hidden; | 设置父级盒子自动获取高度实现撑开父级盒子 |
after伪标签 | content: "";display: block;height: 0;visibility: hidden;clear: both; | 这种方式属于添加空标签的改进方式,实际中推荐使用伪标签法 |
双伪标签法 | .clearfix:after,.clearfix:before {content: "";display: table;} | 也是空标签的改进方式,只不过是在前后添加了空标签 |
2.实现方法
2.1添加额外标签法
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta httpss-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>隔墙法</title>
<style>
.box {
width: 500px;
background-color: cadetblue;
}
.one,
.two {
float: left;
height: 200px;
width: 200px;
background-color: blue;
}
.two {
background-color: palevioletred;
}
.box2 {
width: 500px;
height: 50px;
background-color: black;
}
/* 在浮动的最后一个盒子添加一个空盒子,设置清除浮动,达到隔墙的效果,就可以不影响布局 */
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
<div class="two"></div>
<div class="clear"></div>
</div>
<div class="box2"></div>
</body>
</html>
2.2父级盒子添加voerflow
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta httpss-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>父级添加voerflow</title>
<style>
.box {
width: 500px;
background-color: cadetblue;
/* 在父级添加overflow,就可以实现撑开父级盒子 */
overflow: hidden;
}
.one,
.two {
float: left;
height: 200px;
width: 200px;
background-color: blue;
}
.two {
background-color: palevioletred;
}
.box2 {
width: 500px;
height: 50px;
background-color: black;
}
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
<div class="two"></div>
</div>
<div class="box2"></div>
</body>
</html>
2.3使用after伪标签法
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta httpss-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>after伪标签法</title>
<style>
.clearfix:after {
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
/*由于伪标签只适配新版本浏览器,所以需要额外适配老版本,设置*zoom: 1;*/
.clearfix {
*zoom: 1;
}
.box {
width: 500px;
background-color: cadetblue;
}
.one,
.two {
float: left;
height: 200px;
width: 200px;
background-color: blue;
}
.two {
background-color: palevioletred;
}
.box2 {
width: 500px;
height: 50px;
background-color: black;
}
</style>
</head>
<body>
<!-- 在父级盒子引用清除浮动 -->
<div class="box clearfix">
<div class="one"></div>
<div class="two"></div>
</div>
<div class="box2"></div>
</body>
</html>
2.4双伪标签法
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta httpss-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双伪标签法</title>
<style>
/* 双伪标签 */
.clearfix:after,
.clearfix:before {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/*由于伪标签只适配新版本浏览器,所以需要额外适配老版本,设置*zoom: 1;*/
.clearfix {
*zoom: 1;
}
.box {
width: 500px;
background-color: cadetblue;
}
.one,
.two {
float: left;
height: 200px;
width: 200px;
background-color: blue;
}
.two {
background-color: palevioletred;
}
.box2 {
width: 500px;
height: 50px;
background-color: black;
}
</style>
</head>
<body>
<!-- 在父级盒子引用清除浮动 -->
<div class="box clearfix">
<div class="one"></div>
<div class="two"></div>
</div>
<div class="box2"></div>
</body>
</html>
CSS笔记之清除浮动
https://xsunhua.cn/256.html



共有 0 条评论