一、CSS浮动 (float)
属性 | 作用 |
---|---|
left | 让元素脱离标准流,同一级的元素左浮动并排显示 |
right | 让元素脱离标准流,同一级的元素右浮动并排显示 |
浮动特点
- 浮动的元素脱离了标准流的限制,具有了块级元素和行内元素的性质,可以设置高度,还能并排一行,而且不会有空白折叠现象。
- 浮动的元素依次贴边
- 浮动的元素没有margin塌陷
- 浮动的元素,脱离了标准流,会将原来占有的标准流位置让给后面的一个同级元素。(在IE6、7浏览器中,有兼容问题)
- 字围现象 (同级元素中前面的元素浮动,后面的元素不浮动,不浮动的元素内部还有一些文字。文字内容不会被盖住,会围绕浮动的元素进行加载。)
上篇有介绍标准文档流
二、 浮动导致的问题
- 在标准流中,不设置高度,内部的标准流元素会自动撑高。但是如果内部的子元素进行了浮动,浮动的子元素是不能撑高标准流父元素。
- 父元素没有高度,会影响后面元素的标准流位置。
三、解决方法
- 给标准流父元素强制设置一个合适的高度。&