CSS清除浮动

CSS清除浮动

今天来写一下CSS清除浮动几种方法,权当笔记。

为什么要清除浮动呢?

请看代码:

HTML:

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

CSS:

   .container{
        width: 300px;
        border: 1px solid #000;
        background-color: #aaa;
    }
  .left{
        width: 100px;
        height: 100px;
        background-color: #ffff00;
        float: left;

    }
    .right{
        width: 100px;
        height: 100px;
        background-color: #fa0000;
        float: right;
    }

看代码部分我们是要让 left 和 right 两个 div 在父容器 container 里面左右浮动,看上去写的没毛病,我们来看看效果

诺,效果就是这样,子元素div并没有撑开父容器,这就是我们要清除浮动的原因。

清除浮动的几种方法

第一种方法:

在浮动元素后面添加 class 为 clear 的 空 div 元素,给这个 div 设置样式

.clear{clear:both;}

代码如下:

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="clear"></div>
</div>
.clear{
      clear:both;
   }

看看效果:

撑开了,达到了我们想要的效果。

第二种方法:

浮动元素后面右一个不为空的 div 元素,我们直接为这个元素添加 clear:both 样式

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="content">111</div>
</div>
.content{
      clear:both;
   }

第三种方法:

给父容器添加 overflow:hidden 或者 auto 样式

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>
  .container{
         width: 300px;
        border: 1px solid #000;
        background-color: #aaa;
        overflow:hidden;
        zoom:1;   /*IE6*/
    }

demo 效果同第一种方法。

第四种方法:

给父容器添加 clearfix 的 class ,用 伪元素 clearfix:after 来设置样式,清除浮动

<div class="container clearfix">
    <div class="left"></div>
    <div class="right"></div>
</div>
    .clearfix{
        zoom: 1;                     /*IE6*/
    }
    .clearfix:after{
        content: ".";
        height: 0;
        clear: both;
        display: block;
        visibility: hidden;
    }

效果同上。

第五种方法:

给父容器添加浮动,这种方法用于本身父元素就是浮动的情况下,一般不使用这种方法,

不再过多描述。


更多:

。。。

发布于 2017-03-19

文章被以下专栏收录

    前端小学僧一枚,写写前端学习过程中的知识,以及对互联网的认识看法,大家见笑。