浮动:
float属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在css中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
清除浮动:
1.为父元素添加overflow:hidden,这样父元素就有高度了,父元素的高度便不会被破坏;
2.为父元素添加display:table
3.浮动父元素
4.通过在所有浮动元素下方添加一个clear:both的元素,可以消除float的破坏性。(该元素必须是块级元素)
.fl{
float: left;
}
// 父元素
.clearfix{
overflow: hidden;
}
.clearfix{
display: table;
}
// 浮动元素下方添加元素
.clear{
clear: both;
}
// 父元素添加伪元素
.clearfix::after{
content: "";
display: table;
clear: both;
}
// IE:
.clearfix{
*zoom: 1;
}