浮動元素會造成父元素高度塌陷後續元素也會受到影響
1、浮動的作用
當元素設定fliat浮動後,該元素就會脫離文件流並向左/向右浮動
①浮動元素會造成父元素高度塌陷
②後續元素會受到影響
<div class="box">
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="b"></div>
</div>
<div class="b"></div>
.box{
width: 500px;
background-color: #888;
}
.a{
width: 100px;
height: 100px;
background-color: aqua;
margin: 5px;
float: left;
}
.b{
width: 100px;
height: 100px;
background-color: blueviolet;
}
2、清楚浮動
當父元素出現塌陷的時候,對佈局是不利的,所以我們必須清除副作用
解決方案有很多種
①父元素設定高度
②受影響的元素增加clear屬性
③overflow清除浮動
④偽物件方式
3、父元素設定高度
如果父元素高度塌陷,可以給父元素設定高度,撐開元素本身大小
<div class="box">
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="b"></div>
</div>
.box{
width: 500px;
height:500px;
background-color: #888;
}
.a{
width: 100px;
height: 100px;
background-color: aqua;
margin: 5px;
float: left;
}
.b{
width: 100px;
height: 100px;
background-color: blueviolet;
clear: both;
}
4、overflow清除浮動
如果有父級塌陷,並且同級元素也受到了影響,可以使用overflow清除浮動
這種情況下,父佈局不能設定高度
父級標籤的樣式裡面加:overflow: hidden; clear: both;
<div class="box">
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="b"></div>
</div>
<div class="b"></div>
.box{
width: 500px;
height:500px;
background-color: #888;
overflow: hidden;
clear: both;
}
.a{
width: 100px;
height: 100px;
background-color: aqua;
margin: 5px;
float: left;
}
.b{
width: 100px;
height: 100px;
background-color: blueviolet;
clear: both;
}
5、偽物件方式
如果有父級塌陷,並且同級元素也受到了影響,還可以使用偽物件方式處理
為父級標籤新增偽類after,設定空的內容,並使用clear:both
這種情況下,父佈局不能設定高度
<div class="box">
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="b"></div>
</div>
<div class="b"></div>
.box{
width: 500px;
height:500px;
background-color: #888;
overflow: hidden;
clear: both;
}
.box::after{
content: "";
display: block;
clear:both;
}
.a{
width: 100px;
height: 100px;
background-color: aqua;
margin: 5px;
float: left;
}
.b{
width: 100px;
height: 100px;
background-color: blueviolet;
clear: both;
}