Css清除浮动
2019-09-30 本文已影响0人
木中木
首先，我们看下浮动状态下的效果展示，子集元素浮动会造成无法撑开父级，如此在父级设置的高度、背景、margin都会失效，下面看个例子。
`
html:
<div class="father">
<div class="child1">子级1</div>
<div class="child2">子级2</div>
</div>
css:
.father {
background: red;
width: 200px;
}
.child1 {
width: 80px;
background: blue;
float: left;
}
.child2 {
width: 80px;
background: yellow;
float: right;
}
`
这里我们定义了一个div.father元素，然后他又两个child，分别设置了背景颜色，这里我们看下效果图1-1，我们可以看到并没有看到父级红色背景，因为子元素浮动，无法撑开父级。
1-1
清除浮动有三个方法：
1.设置父级的高度
直接设置父级高度就可以了，如图2-1：
2-1
2.可以使用overflow: auto;overflow可以促使div建立BFC块级，消除浮动，如图3-1
3-1
3.使用clear：both，如图4-1
4-1
