清除浮动的几种方式

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

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

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

清除浮动的几种方式：

①：给浮动后的下个元素或者不想其浮动的元素让其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

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