失效原因:

  1. 要给居中的元素一个宽度,否则无效。
  2. 该元素一定不能浮动或绝对定位,否则无效。
  3. 在HTML中使用<center></center>标签,需考虑好整体构架,否者全部元素都会居中的。
  4. 有时需要给父级元素添加text-align: center;
  5. 有时可能涉及到 <!DOCTYPE>类型相关定义。

当元素 float 后元素身上发生了什么:

  1. 脱离当前的文档流,变换到容器的边缘,或是另一个浮动box的边缘,若空间不够则向下移动直到可以放下(margin的值是auto或不指定在渲染时会被当做0处理)
  2. 文档流中的line box, inline box将围绕float box
  3. float box若不设宽度将是它实际内容的宽度
  4. 把box都变成block-level box,形成一个新的block formatting context
  5. top/left/right/bottom, z-index无效

滥用float会导致各种bug,诸如:Incorrect Float Shrink-Wrap Bug、Float Squeeze Weird Gap Bug、Float Squeeze Duplicate Last Character Bug、Image Float Bullet Chaos Bug、Staircase Bug、Double Margin Bug、Italics Float Bug、3px Jog Bug、Scared of Floats Bug、Escaping Floats Bug、IE6 Peekaboo Bug……等等。所以在实际使用中有个原则,尽量不同时用2个或以上的float(比如可以用inline-block替代float)

转自 http://blog.csdn.net/Dong_PT/article/details/51239526

最新文章

  1. JavaScript基础知识总结(四)
  2. 利用NSCalendar类实现日期的比较
  3. web api与webservice(转)
  4. inside the C++ Object model总结
  5. Linux下apache+phppgadmin安装配置
  6. linux 压缩命令详解
  7. Redis linux 下安装 及扩展配置
  8. Android之Fragment学习总结(1)
  9. 一个很不错的bash脚本编写教程
  10. spring来了-05-JDBC
  11. RMAN备份与恢复之DataBase
  12. linux服务器下tomcat部署项目内存溢出
  13. C#关于等待窗体(转)
  14. SQL Server2008知识点总结
  15. Docker 第一篇 认识Docker 的作用好处
  16. fremarker导出word list
  17. 从 0 到 1 实现 React 系列 —— 2.组件和 state|props
  18. JSONModel(I)
  19. js td innerHTML
  20. Jexus高级功能设置

热门文章

  1. 网络编程基础socket 重要中:TCP/UDP/七层协议
  2. bzoj3039 joyoi1939 玉蟾宫 悬线法
  3. 前端PS切图技巧
  4. 我的PC必装软件
  5. 编绎调试HotSpot JVM及在Eclipse里调试HotSpot一些步骤
  6. tornado中文教程
  7. 矩阵快速幂在ACM中的应用
  8. oracle主键设置与oracle序列
  9. 九度oj 题目1085:求root(N, k) 清华2010年机试题目
  10. 【Luogu】P2801教主的魔法(分块)