浮动的特征
- 浮动的元素脱离标准文档流,简称“脱标”
- 浮动的元素相互紧密贴靠
- 浮动的元素具有“字围”现象
- 浮动的元素会对后面的元素造成影响
清除浮动的方法
给父盒子加上高度(不常用)
因为我们的元素基本上是由内容撑起的高度,不会给予固定值。
虽然此方法可以清除,但由于给定了固定的高度,在项目进行修改时,难免会动一发而牵全身。给父盒子加上clear:both
给父盒子加上clear:both后,虽然可以清除,但是父盒子的margin值会失效,也就是说父盒子塌陷了。所以也不推荐使用。外墙法
在浮动的两个父盒子之间加上一个样式为clear:both的div,通常来讲,就是在两个浮动的父盒子之间,用一堵墙隔开以此来实现清除。这个方法虽然可以清除浮动,的margin值也能设置,但是父盒子是不能设置高度的。内墙法
就是在浮动的父盒子最前面或最后加上一个样式为clear:both的div,这个方法可以清除浮动,也有高度,但页面中会多出许多无用的div,代码过于冗杂。overf:hidden
本意是一出盒子的部分隐藏起来,但给一个浮动的父盒子加上这个属性也能清除浮动。这种方法技能清除浮动,又让盒子有了高度,还不会多出一些空盒子,所以做项目的过程中,这种方法最为常用。