当我们需要设置一个页面导航栏的时候，会把子元素设置为浮动float:left; ，但是会有其他情况
如果设置父元素的高度的话，可以正常显示
如果不设置父元素的高度，只是单纯地设置子元素的浮动，此时父元素的高度不会自动撑开
解决浮动造成的影响
1、最常用的方式：
利用:after伪选择器，添加一个末尾的块级元素，让它撑开父元素高度
<style>
.box,.box2{
width: 800px;
border: 1px solid red;
}
.box p{
float: left;
width: 100px;
height: 100px;
margin-right: 10px;
background-color: skyblue;
}
/* :after意思是选中最后一个标签，做一些设置，来清除浮动带来的影响 */
.clearfix:after {
content: "clear"; /* 设置一个占位内容，随便填*/
clear: both; /*清除前面元素的浮动影响*/
display: block; /*把选中的最后一个元素设置为block块级元素*/
height: 0px; /*将盒子高度设置为0，避免影响父盒子高度*/
visibility: hidden; /*将创建的元素位置隐藏，但是位置还是有的，只是 不显示*/
}
</style>
</head>
<body>
<div class="box clearfix">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
2、最常用方式：
设置父元素的overflow属性为hidden，会根据子元素的最大高度设置为父元素的高度
<style>
.box{
width: 800px;
border: 1px solid red;
overflow: hidden;
}
.box p {
width: 100px;
height: 100px;
background-color: skyblue;
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="box">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
******注意点*****
如果遇到子元素有浮动效果的时候，就可以为父元素添加一个class属性为clearfix通用的，然后设置css样式 .clearfix:after {里面设置}
截屏2021-09-10 下午9.15.36.png
网友评论