清除浮動的方式
阿新 • • 發佈:2018-12-11
1. 給父級定義height
.parent {
background-color: red;
}
.float-left {
width: 200px;
height: 200px;
float: left;
}
<div class="parent">
<div class="float-left"></div>
</div>
2. 在結尾處新增空div,樣式設定為clear: both
.parent {
background-color: red;
}
.float-left {
width: 200px;
height: 200px;
float: left;
}
<div class="parent">
<div class="float-left"></div>
<div style="clear: both"></div>
</div>
3. 父級定義偽類
.parent {
background-color: red;
}
.float-left {
width: 200px;
height: 200px;
float : left;
}
.clearfloat:after {
display: block;
clear: both;
content: '';
visibility: hidden;
height: 0;
zoom: 1;
}
<div class="parent clearfloat">
<div class="float-left"></div>
</div>
4. 把父級變成BFC
生成BFC的條件
- 根元素
- float的值不為none
- overflow的值不為visible
- display的值為inline-block、table-cell、table-caption
- position的值為absolute或fixed
.parent {
background-color: red;
float: left;
}
.parent {
background-color: red;
overflow: hidden;
}
.parent {
background-color: red;
display: table-cell;
}
.parent {
background-color: red;
position: absolute;
}