浮动的理解

http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html

假如某个div元素A是浮动的,如果A元素上一个元素也是浮动的,那么A元素会跟随在上一个元素的边(如果一行放不下这两个元素,那么A元素会被挤到下一行);如果A元素上一个元素是标准流中的元素,那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐。

设置浮动之后,元素脱离标准文档流,元素顶部与之前的上一个标准流中元素底部对齐


假如我们只把div2、div4左浮动

依然是根据结论,div2、div4浮动,脱离了标准流,因此div3将会自动上移,与div1组成标准流。div2发现上一个元素div1是标准流中的元素,因此div2相对垂直位置不变,与div1底部对齐。div4发现上一个元素div3是标准流中的元素,因此div4的顶部和div3的底部对齐,并且总是成立的,因为从图中可以看出,div3上移后,div4也跟着上移,div4总是保证自己的顶部和上一个元素div3(标准流中的元素)的底部对齐。

float属性详解:

使用clear属性的时候要记住:clear只对元素本身的布局起作用。

浮动详解

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 本文以div元素布局为例。教程开始:首先要知道,div是块级元素(div与span),在页面中独占一行,自上而下排...
    TW妖妖阅读 432评论 0 1
  • 本文为转载文章,转载地址:经验分享:CSS浮动(float 写在前面的话: 如果读者理解CSS盒子模型,但对于浮动...
    翻炒吧蛋滚饭阅读 1,130评论 1 14
  • 作者:杨元原文地址:http://www.cnblogs.com/iyangyuan 很早以前就接触过CSS,但对...
    IT程序狮阅读 706评论 1 12
  • CSS浮动 首先div是块级元素,在页面中独占一行,自 上而下排列。 以上可以看出,即使div1de宽度很小,页...
    xf0128阅读 433评论 0 1
  • 对于刚刚入门学习前端的渣渣来说,对于css浮动甚是不解,故找来优秀并通俗易解的文章来记录。 教程开始: 首先要知道...
    呆呆滴木木菇凉阅读 405评论 0 1

友情链接更多精彩内容