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

清除浮动

时间:2018-07-29 16:24:59      阅读:130      评论:0      收藏:0      [点我收藏+]

标签:order   需要   清除浮动   lock   display   dde   over   oat   文档流   

清除浮动

浮动元素会脱离文档流,使得行内元素环绕它的效果,但是它也会造成父元素塌陷、元素重叠的问题,所以这个时候就需要清除浮动带来的影响。清除浮动的方法主要有三种:

以这段代码为例:

<div class="content">
    <div class="a"></div>
    <div class="b"></div>
    这里面是一段文字效果
</div>
<style>
    .a, .b{
        width:50px;
        height:100px;
        border: 1px solid green;
    }
    .a{
        float:left;
    }
    .b{
        float:right;
    }
    .content{
        width:100%;
        border:1px solid pink;
        clear:both;
    }
</style>

上面的代码中,由于a、b脱离文档流并分别位于content的两侧,而此时content的高度仅仅只是文字的高度,这是因为a、b两个元素浮动造成了父元素塌陷,那么消除浮动带来的影响呢?

  1. div+clear

    在content内加一个div的空白元素如下:

    <div class="content">
        <div class="a"></div>
        <div class="b"></div>
        这里面是一段文字效果
     <div class="clearfix"></div>
    </div>
    <style>
        .clearfix{
            clear:both;
        }
    </style>
  2. 伪元素+clear

    .content:after{
        content: ‘‘;
        display: block;
        clear: both;
    }
  3. BFC原理

    将content声明为BFC

    .content{
        overflow: hidden;
    }

清除浮动

标签:order   需要   清除浮动   lock   display   dde   over   oat   文档流   

原文地址:https://www.cnblogs.com/171220-barney/p/9385451.html

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