概述
float 與 flex 均能實現(xiàn)九宮格布局
HTML
<div class="boxFather">
<div class="box1 box"></div>
<div class="box2 box"></div>
<div class="box3 box"></div>
<div class="box4 box"></div>
<div class="box5 box"></div>
<div class="box6 box"></div>
</div>
flex
flex 需要在父視圖中設(shè)置
.boxFather {
background-color: pink;
width: 500px;
height: 500px;
display: flex;
flex-wrap: wrap;
}
float
float 需要在子視圖中設(shè)置
并且使用 float 需要在后面主動清除浮動
.boxFather {
background-color: pink;
width: 500px;
height: 500px;
}
.box {
width: 110px;
height: 60px;
float: left;
width: calc(calc(100%/3) - 10px);
margin-left: 10px;
margin-bottom: 10px;
}
.boxFather::after {
clear: both;
content: "";
display: block;
}
