美文网首页
清除浮动

清除浮动

作者: Zacks_8407 | 来源:发表于2017-04-20 23:20 被阅读0次

    方法:

    1.在父元素处设置高度(此方法不推荐)

    2.使用clear属性(但是设置margin属性无效)

    3.使用clear属性,并给body添加一个边框。

    4.外墙法:在两个盒子中间添加一个额外的块级元素,给这个额外的块级元素设置属性clear:both,然后设置高度即可让两盒子有margin

    4.内墙法:在第一个盒子中所有子元素的最后添加一个块级元素 ,给这个额外的块级元素设置属性clear:both。

    外墙法可以在第二个盒子设置margin-top,不能在第一个盒子设置margin-bottom。

    内墙法可以在第二个盒子设置margin-top,能在第一个盒子设置margin-bottom,也可以设置自身高度。

    外墙法和内墙法的区别?

    外墙法不能撑起第一个盒子高度,内墙法可以撑起第一个盒子的高度。

    伪类法清除浮动(和内墙法一样,但是形式不一样)

    .box::after{

    content:"";

    display:block;

    height:0;

    visibility:hidden;

    clear:both;

    }

    .box{

          *zoom:1;          //此项是处理IE6不兼容问题。

    }

    overflow清除浮动

    作用:

    1.隐藏超出元素外部分的内容

    2.清除浮动(设置属性:overflow:hidden;即可清除浮动,同时也需做兼容处理。)

    .box{

    *zoom:1;          //此项是处理IE6不兼容问题。

    }

    3.可以通过设置overflow:hidden;让里面的盒子设置margin-top之后,外面的盒子不被顶下来。

    相关文章

      网友评论

          本文标题:清除浮动

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