清除浮动的介绍
含义:清除浮动(标签)给别的(标签)带来的影响
影响:如果子元素浮动了,此时子元素不能撑开标准流的块级父元素
原因:子元素浮动后脱标→不占位置
目的:需要父元素有高度,从而不影响其他网页元素的布局
先看代码: 未去掉父盒子top高度之前
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.top{
margin:0 auto;
width: 1000px;
height: 200px;
background-color: lightblue;
}
.left{
float: left;
width: 100px;
height:200px;
background-color: blanchedalmond;
}
.right{
float: right;
width: 890px;
height: 200px;
background-color:bisque;
}
.bottom{
height: 100px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="top">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</body>
</html>
去掉父盒子top高度之后
受浮动影响的情况产生了!!!
父子级标签,子级浮动,父级没有高度,后面的标准流盒子会受影响,显示到上面的位置。
清除浮动的方法
①直接设置父元素高度
特点:
优点:简单粗暴,方便
缺点:有些布局中不能固定父元素高度。如:新闻列表
②额外标签法
操作:
1,在父元素内容的最后添加一个块级元素
2,给添加的块级元素设置clear:both
特点:
缺点:会在页面中添加额外的标签,会让页面的HTML结构变得复杂
<div class="top">
<div class="left"></div>
<div class="right"></div>
<!-- 加上一个类 -->
<div class="clearfix"></div>
</div>
.clearfix{
// 清除左右两侧的浮动影响
clear: both;
}
③单伪元素清除法
<div class="top clearfix" >
<div class="left"></div>
<div class="right"></div>
<!-- 加上一个类 -->
<!-- <div class="clearfix"></div> -->
<!-- 这次用用css -->
</div>
<div class="bottom"></div>
/*单伪元素清除浮动和额外标签法原理是一样的*/
.clearfix ::after{
content:'';
/*伪元素添加的标签是行内,要求块*/
display: block;
clear: both;
/* 为了兼容性 */
height: e;
visibility: hidden;
}
④双伪元素清除法
特点:
优点:项目中使用,直接给标签加类即可清除浮动。
/*.clearfix ::before 作用:解决外边距塌陷问题
外边距塌陷:父子标签,都是块级,子级加margin会影响父级的位置*/
/*清除浮动*/
.clearfix::before,
.clearfix ::after {
content: '';
display: table;
}
/*真正清除浮动的标签*/
.clearfix ::after {
content: '';
display: table;
clear: both;
}
⑤ 给父元素设置overflow : hidden
操作:
直接给父元素设置overflow : hidden
优点:
方便
.top{
margin:0 auto;
width: 1000px;
/* height: 200px; */
background-color: lightblue;
overflow: hidden;/*最简单!!!!!!*/
}
第五种推荐