码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-03-02 23:29:06      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:

第一种做法:

父元素也设置:浮动

<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清除浮动的三种方式

标签:

原文地址:http://www.cnblogs.com/swl267/p/5236681.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!