清除浮动的几种方式

在上一篇中转载的博客文章相信已经把浮动的知识点讲的很清楚了，所以接下谈谈清除浮动的几种方式

浮动的基本概念：浮动的元素可以向左、向右移动，直到它的外边缘碰到其包含块或者另一个浮动元素为止，由于浮动框不在文档的普通流当中，所以其他的普通流中的块框会认为浮动框不存在一样

浮动元素的包含块是其最近的块级祖先元素，不论元素以前本身是什么，浮动过后都会生成一个块级框

清除浮动的几种方式：

• ①：给浮动后的下个元素或者不想其浮动的元素让其css属性设置clear:both

• ②：当目前没有元素可以清除浮动时，可以在紧接上面浮动元素后面添加一个空的标签，设置其css属性为clear:both.其实与①思想类似，但缺点是页面中空标签增多

• ③：给父元素定义height(如果定义父元素的高度，它内部的浮动不会影响父元素后面的同级元素)，但缺点是只适合高度固定的布局

• ④：父元素定义伪类 :after
  (.father:after{display:block;clear:both;content:"";visiblity:hidden;
height:0})

• ⑤：父元素定义overflow:hidden 但缺点是不能和position配合使用，超出的尺寸会被隐藏

• ⑥：父元素定义overflow:auto 但缺点是内部宽高超过父元素时会出现滚动条

• ⑦：将父级元素也设置成浮动 但缺点是只限于解决了当前的浮动问题

• ⑧：将父元素设置成表格元素 display:table

  以上只是在实际中用到过，如果还有更好的方法只等下次来更新