美文网首页
css的浮动float

css的浮动float

作者: 宁骥 | 来源:发表于2017-09-11 11:08 被阅读0次

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


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

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

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

    智能布局

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

    相关文章

      网友评论

          本文标题:css的浮动float

          本文链接:https://www.haomeiwen.com/subject/iqixsxtx.html