前言:本文主要介绍四种清除浮动的方法及其优缺点。浮动对页面的影响:如果一个父块元素中的子元素是浮动的,那么所有浮动的子元素都在文档流之外,如果父元素的高度无法确定,它下面的兄弟元素将自动fillin,造成视图结构混乱,所以这时候需要清除float。关于清除浮动的方法:方法一:使用overflow属性清除浮动。parent{overflow:hidden;} 先找到浮动框的父元素,然后给父元素添加一个属性:overflow:hidden,就是为了清除这个父元素中浮动子元素对它的影响这一页。 注意:这个方法一般不会用到,因为overflow:hidden有一个特点,就是离开元素所在的区域后会隐藏(overflow:hidden会把多余的部分隐藏起来)。方法二:使用额外的label方法。clear{clear:both;} 在浮动框下面再放一个label,在这个label中使用clear:both来清除浮动对页面的影响。 一个。内部标签:会重新扩展这个浮动框的父框的高度。 b.externallabel:会清空这个浮动框的影响,但是不会展开父框box。 注意:一般情况下不会用这个方法来清除浮动。因为这种清除浮动的方式会增加页面的标签,造成结构混乱。方法三:使用伪元素清除浮动(after意思:后来,以后).clearfix:after{centent:"";//设置内容为空height:0;//高度为0line-height:0;//行高为0display:block;//将文本转换为块级元素visibility:hidden;//隐藏元素clear:both//清除Float}.clearfix{zoom:1;为了兼容IE}方法四:使用双伪元素清除float.clearfix:before,.clearfix:after{content:"";显示:块;clear:both;}.clearfix{zoom:1;}总结第一种方法会在我们想要清除浮动并保留多余部分的时候隐藏多余的部分。第二种方法会添加很多不必要的标签。清除浮点建议使用第三种方法第四种是第三种的改进版。虽然比较简单,但是并不严谨!
