关于清除浮动的4种方法
浮动对页面的影响
如果父盒子中有个子盒子,并且父盒子没有设置高,子盒子在父盒子进行浮动,那么父盒子的高度为0 。由于父盒子的高度为0,下面的元素将会自动补位,因此这个时候需要进行浮动的清除
关于清除浮动的方式:
方式一:试用overflow属性来清除浮动
.ovj{
overflow:hidden
}
先找到浮动盒子的父元素,再再父元素中添加一个属性:overflow:hidden,就是清除这个父元素中的子元素浮动对页面的影响。
注意:一般情况也不会试用这种方式,因为overflow:hidden有一个特点,离开了这个元素所在的区域以后被隐藏(overflow:hidden会将超出的部分隐藏起来)。
方式二:使用额外标签法
.clear{
clear:both;
}
在浮动盒子之下再放一个标签,再这个标签中使用clear:both,来清除浮动对页面的影响。
a 内部标签:会将这个浮动盒子的父盒子高度重新撑开
b.外部标签:会将这个浮动盒子的影响清除,因为这种清除浮动的方式会增加页面的标签,造成结构的混乱。
**方式三:**使用伪元素来清除浮动(after意识:后来,以后)
.clearfix:after{
content:""; //设置内容为空
height:0; //高度为0
line-height:0; //行高为0
display:block; //将文本转为块级元素隐藏
clear:both; //清除浮动
}
**方法四:**使用双伪类元素清除浮动
.clearfix:before,.clearfix:after{
content:"";
dispay:block;
clear:both;
}
.clearfix{
zoom:1
}