css的浮动float

当写多个div时,每个div都是块级元素,所以在文档流上会从上到下各占一行排列,即使一行能容下两块也会占一行排列。但float会让某个div元素脱离标准流,漂浮在标准流之上,和标准流不是一个层次。


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

内容设置浮动后,因为推理文档流会让父元素高度塌陷。


在为内联元素设置浮动属性之后,display属性由inline变成block。并且可以为内联元素设置宽高。


智能布局

所谓智能布局,就是两栏都不需要设置宽度,宽度随内容自适应。



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

相关阅读更多精彩内容

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

友情链接更多精彩内容