清除浮动的方法

2021-08-24  本文已影响0人  沃德麻鸭

1.额外标签法

给谁清除浮动就在谁的后面额外添加一个空白标签,给那个空白标签添加样式:style=‘clear:both’   /  class='clear' ===>.clear{clear:both}

浮动元素

<div  style='clear:both'></div>    //方式一      行内样式

<div  class=’clear‘></div>          <style>  .clear{ clear:both }    </style>    //方式二  两种做法一样

这里是通过在别的元素上清除浮动来实现撑开高度的,而不是在浮动元素上

2.父级添加  overflow:hidden

  要注意是给父元素加(并不是所有的浮动都要加,谁影响布局才清除谁)

3.使用after伪元素

给父元素添加 clearfix , 由于IE6-7不支持:after,所以使用*zoom:1,触发hasLayout

.clearfix:after{

        content:'';

        display:block;

        height:0;

        clear:both;

        visibility:hidden;}

.clearfix{ *zoom:1 }

4.使用before和after双伪元素

给父元素添加 clearfix

.clearfix:before,.clearfix:after{

         content:'';

         display:table;}

.clearfix:after{

         clear:both;}

.clearfix{

        *zoom:1;}

上一篇下一篇

猜你喜欢

热点阅读