美文网首页
揭开浮动布局的秘密

揭开浮动布局的秘密

作者: 是归人不是过客 | 来源:发表于2018-08-13 20:37 被阅读14次

    1,浮动(float)

    float属性有4个可选属性,none,left,right,inherit

    none为默认值,即不可浮动。

    inherit表示继承父元素的float值。

    (1)对于块级元素来说,在不设长度的时候,默认的宽度是100%,一旦设置浮动,宽度就会根据内容进行自动调整。如图:

    设置浮动 没有设置浮动

    (2)设置浮动,不仅会在Y轴进行浮动,而且在Z轴也会浮动,譬如,将子模块设置浮动后,父元素的高度也会变成0

    (3)虽然浮动脱离了文档流,但是里面的内容仍然占据着空间,看看下边的例子,跟我们想的是不是不一样。normal没有被float覆盖

    例子代码 显示结果

    2,清除浮动

    (1)clear 可选 left,right,both

             定义了元素的哪一侧不能出现浮动

    (2)对父类使用:after伪类

           .clearfix :after{

             display:block;

              clear:both;

             }

    相关文章

      网友评论

          本文标题:揭开浮动布局的秘密

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