H5-28 清除浮動

张筱菓發表於2024-12-04

浮動元素會造成父元素高度塌陷後續元素也會受到影響

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;
}

相關文章