清浮动的几种方式

Posted 2020-09-11 kbeer

清浮动总结：

       使用浮动会使当前标签产生向上浮的效果，影响前后标签、父级标签的位置及 width height 属性。 这个时候需使用清浮动，下面是总结的几种清浮动的方式。

1.clear：both；

浮动的标签的后标签是块则加：clear:both；无则需添加一个空div/br，和clear：both；让父级div能自动获取到高度。

2.给父级定义height；

由于浮动后脱离文档流，父级无法自动获到高度而不能包含浮动标签。但如果高度和父级div不一样时，会产生问题。

3.父级div定义 伪类:after 和 zoom

/*清除浮动代码*/
.clearfloat:after{content:"";display:block;clear:both;visibility:hidden;height:0}
.clearfloat{zoom:1}

此方法为常用方法

4.父级div定义 overflow:hidden；/ overflow:auto；

必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度。

5.父级div也浮动

此方法不推荐主要会引起下一个浮动影响。

6.父级div定义 display:table

将div变成表格，会产生未知的问题，也不常用。

 

来源：http://blog.csdn.net/qq_31121871/article/details/54563980