浮动就是让元素脱离了原本的文本流,按照浮动的指定方向进行移动,直到遇到了父级边界元素或者是相邻的浮动元素才会停下。浮动的元素会使得它的高度塌陷,进而影响到布局的正常显示。
比如,在不清除浮动的情况下:
.box1 {
width: 200px;
height: 100px;
background-color: #e04993;
float: left;
}
.box2 {
width: 300px;
height: 100px;
background-color: blue;
float: left;
}
.box3 {
width: 600px;
height: 100px;
background-color: blueviolet;
}
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="box3"></div>
清除浮动后:
.box:after {
content: "";
height: 0;
display: block;
visibility: hidden;
clear: both;
}
.box {
zoom: 1; //after伪类,触发IE下haslayout,使元素根据自身内容计算宽高,它的效果和height:1%一样。
}