网页布局混乱,clear:both不起作用

江山如画 问题 620

2018092806141299

网页布局混乱,两个DIV位置错乱了

回复

共1条回复 我来回复
  • 江山如画的头像
    江山如画
    这个人很懒,什么都没有留下~
    评论

    div产生位置错乱原因,主要是float浮动造成的,需要使用clear来清附浮动。

    但是要注意:

    clear属性只是在block元素是起作用,如果你把clear:both用在一个inline-blockinline元素上,clear:both是不会起任何作用的。

    如果你想对一个inline-blockinline元素施加clear:both的效果,最简单的方法是用div元素把它包起来,让在这个div上利用::after伪元素实现其内部的元素的clear:both,下面是一种参考的写法:

    .clearfix:after {
      clear:both;
      content:".";
      display:block;
      height:0;
      line-height:0;
      visibility:hidden;
    }

    将上面的.clearfix放在包裹inline-blockinline的float元素的div上,它就像表现出类似clear:both的效果。

    5年前 0条评论