本文探讨了CSS浮动的特点，如元素脱离标准流、字围现象等，并指出浮动可能导致父元素高度丢失的问题。针对这一问题，提出了几种解决方案，包括设置固定高度、使用overflow属性、外墙法和内墙法。总结建议，对于高度固定的父元素可直接使用height属性，而高度不固定时，使用overflow属性来解决浮动问题。
一、CSS浮动 (float)
| 属性 | 作用 |
|---|---|
| left | 让元素脱离标准流，同一级的元素左浮动并排显示 |
| right | 让元素脱离标准流，同一级的元素右浮动并排显示 |
浮动特点
- 浮动的元素脱离了标准流的限制，具有了块级元素和行内元素的性质，可以设置高度，还能并排一行，而且不会有空白折叠现象。
- 浮动的元素依次贴边
- 浮动的元素没有margin塌陷
- 浮动的元素，脱离了标准流，会将原来占有的标准流位置让给后面的一个同级元素。（在IE6、7浏览器中，有兼容问题）
- 字围现象 （同级元素中前面的元素浮动，后面的元素不浮动，不浮动的元素内部还有一些文字。文字内容不会被盖住，会围绕浮动的元素进行加载。）
上篇有介绍标准文档流
二、 浮动导致的问题
- 在标准流中，不设置高度，内部的标准流元素会自动撑高。但是如果内部的子元素进行了浮动，浮动的子元素是不能撑高标准流父元素。
- 父元素没有高度，会影响后面元素的标准流位置。
三、解决方法
- 给标准流父元素强制设置一个合适的高度。&
最低0.47元/天 解锁文章
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
