當(dāng)我們需要設(shè)置一個(gè)頁面導(dǎo)航欄的時(shí)候，會(huì)把子元素設(shè)置為浮動(dòng)float:left; 判哥，但是會(huì)有其他情況
如果設(shè)置父元素的高度的話豆励，可以正常顯示
如果不設(shè)置父元素的高度技扼，只是單純地設(shè)置子元素的浮動(dòng)串纺，此時(shí)父元素的高度不會(huì)自動(dòng)撐開
解決浮動(dòng)造成的影響
1榄笙、最常用的方式：
利用:after偽選擇器，添加一個(gè)末尾的塊級元素，讓它撐開父元素高度
<style>
.box,.box2{
width: 800px;
border: 1px solid red;
}
.box p{
float: left;
width: 100px;
height: 100px;
margin-right: 10px;
background-color: skyblue;
}
/* :after意思是選中最后一個(gè)標(biāo)簽棚蓄，做一些設(shè)置，來清除浮動(dòng)帶來的影響 */
.clearfix:after {
content: "clear"; /* 設(shè)置一個(gè)占位內(nèi)容睛挚，隨便填*/
clear: both; /*清除前面元素的浮動(dòng)影響*/
display: block; /*把選中的最后一個(gè)元素設(shè)置為block塊級元素*/
height: 0px; /*將盒子高度設(shè)置為0淤击，避免影響父盒子高度*/
visibility: hidden; /*將創(chuàng)建的元素位置隱藏，但是位置還是有的，只是 不顯示*/
}
</style>
</head>
<body>
<div class="box clearfix">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
2楣责、最常用方式：
設(shè)置父元素的overflow屬性為hidden蛔屹，會(huì)根據(jù)子元素的最大高度設(shè)置為父元素的高度
<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>
******注意點(diǎn)*****
如果遇到子元素有浮動(dòng)效果的時(shí)候，就可以為父元素添加一個(gè)class屬性為clearfix通用的育叁，然后設(shè)置css樣式 .clearfix:after {里面設(shè)置}
截屏2021-09-10 下午9.15.36.png
