父元素div清除浮动的三种方式

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了父元素div清除浮动的三种方式相关的知识,希望对你有一定的参考价值。

第一种做法:

父元素也设置:浮动

<style>

  div.b{

    float:left;

  }

  div.c{

    float:left;

    width:250px;

    height:100px;

  }

  div.d{

    float:right;

    width:250px;

    height:100px;

  }

</style>

<div class="b">

  <div class="c"></div>

  <div class="d"></div>

</div>

 

第二种做法:在最后添加一个空标签

<style>

  div.c{

    float:left;

    width:250px;

    height:100px;

  }

  div.d{

    float:right;

    width:250px;

    height:100px;

  }

</style>

<div class="b">

  <div class="c"></div>

  <div class="d"></div>

  <div style="clear:both;"></div>

</div>

 

第三种做法:给父元素添加清楚浮动

<style>

  div.b:after{

    content:‘.‘;

    display:block;

    height:0px;

    clear:both;

    visibility:hidden;

  }

  div.c{

    float:left;

    width:250px;

    height:100px;

  }

  div.d{

    float:right;

    width:250px;

    height:100px;

  }

</style>

<div class="b">

  <div class="c"></div>

  <div class="d"></div>

</div>

 

三种方式收藏日后使用

以上是关于父元素div清除浮动的三种方式的主要内容,如果未能解决你的问题,请参考以下文章

css:清除浮动的三种方式及其原理

ZXJL——清除浮动负面效果的三种方式

清除浮动的三种方式

CSS基础知识四浮动清除浮动

清除浮动的方式

清除浮动的几种方法