css中清除浮动的几种方法(撑起浮动元素父元素的高度)

css浮动会使子元素脱离文档流，有些情况下会使其父元素失去高度，从而影响页面的整体布局，造成意想不到的布局效果，这里总结了几种常用的清除浮动影响的方法，简单介绍各种方法的适用范围和优缺点。

1.设置父元素的overflow属性的属性值为"hideen"，但是此方法会影响到于元素下原本需要有溢出效果的元素的正常显示，需要保证父元素下没有用到溢出效果；

.father{
   overflow:hidden;
}

2.直接手动设置父元素的高度为合适的值，达到撑起父元素的效果，但是使用起来很麻烦。在有些特殊情况下，父元素的高度需要自适应，所以不适合给父元素设置固定的高度；

3.使用:after伪元素选择器，选择父元素，并使用内容生成(content)属性生成空字符即可，设置其属性为both。生成元素将永远处于父元素末尾撑起父元素高度。这种方法应用起来比较方便，可在css中定义好特定分类，提高代码重用；也可以不适用选择器，选择手动在父元素末尾添加空标签，并为其设置clear:both;属性值对。

.father:after{
  content:"";
　height:0;
　visibility:hidden;
　display:block;
　clear:both;
}

4.在父元素内容的结尾使用<br />换行标签，但是换行标签会给父元素添加额外的空白区域（额外高度），并清除<br />标签的各种高度，也可搭配:after为元素选择器和内容生成属性一起使用；