浮动问题

Posted 2020-10-08

若父元素不设置height,那么它的高度就会被它的内容撑开：但是如果子标签设置float,由于设置浮动的子元素在父元素中是不占位置的，此时，父元素的高度是则不会被撑开：子元素的位置会被认为是空的，下边的内容就会移动到子元素原来所占的位置。
因此为了不影响布局的变化，需要清除浮动，方法有：
1.在父元素上添加属性：overflow:hidden;
2.添加额外标签（不建议使用）；
3.使用伪元素清楚浮动 :after
.clearfix:after{

　　　　　　centent:"";

　　　　　　height:0;

　　　　　　line-height:0;

　　　　　　display:block;

　　　　　　visibility:hidden;

　　　　　　clear:both;

　　　　　}

　　　　.clearfix{
　　　　　　zoom:1; //兼容IE
　　　　　　
　　　　}