1.浮动的特性
- 浮动的元素脱离标准文档流
- 浮动的元素相互贴靠
- 浮动的元素具有“字围现象”
- 浮动的元素会对后面的元素造成影响
2.清除浮动影响的方法
给父盒子加上高度(项目中不常用)
因为我们的元素基本上是由内容撑起高。不会给固定的高给后面的父盒子加上clear:both(浮动清除,但是父盒子的margin失效了:父盒子塌陷了)会引起父盒子的margin失效,也不推荐使用。
- 外墙法(在浮动的两个父盒子之间加上一个div,这个div样式clear:both)这个时候,浮动清除了。margin也出现了。但是父盒子还是没有高度。
- 内墙法(在浮动的父盒子最前面或者最后面加上一个div,这个div的样式为clear:both)父盒子有了高度但是页面中出现了很多无用的div
- overflow:hidden(给第一个浮动的父盒子加上这个属性。也能清除浮动,本意是溢出盒子的部分隐藏起来)这种方法,既能清除浮动,又让盒子有了高度,还不会莫名奇妙的出现空盒子。所以推荐使用!