CSS清除浮动最好方法
-
在父级上加上clearfix
-
.clearfix::before, .clearfix::after{ content:''; display:table; clear:both; }
· -
浮动问题:
- float或者position脱离文档流,父级没有高度,父级塌陷。
-
外边距重叠问题:
- 父盒子外边距直接接触的时候,子盒子设置margin,父盒子会跟着动
- 上下两个盒子,同时有上下margin的时候,同为正,取大的那个值,同为负值,取绝对值大的那个值,一正一负取相加的值
-
这个方法的好处:
- 解决相邻外边距重叠问题
- 解决浮动问题
-
解决原因:
- 解决外边距重叠:display:table让两个盒子不相连
- 解决浮动:clear:both清除两边浮动
-
其余方法:
- 父级加
overflow:hidden
- 父级加