当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动。

#div {
      background-color: blueviolet;
}

#div p {
    width: 100px;
    height: 100px;
    background-color: red;
    float: right;
}

<div id="div">
    <p>float: right;</p>
</div>

清除浮动方法:


方法一:使用带clear属性的空元素或者给浮动元素后面的元素添加clear属性。

在浮动元素后使用一个空元素如<div class="clear"></div>,并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。

#div {
  background-color: blueviolet;
}

#div p {
    width: 100px;
    height: 100px;
    background-color: red;
      float: right;
}
.clear{
    clear: both;
}

<div id="div">
    <p>float: right;</p>
    <div class="clear"></div>
</div>

优点:简单,代码少,浏览器兼容性好。

缺点:需要添加大量无语义的html元素,代码不够优雅,后期不容易维护。


方法二:使用CSS的overflow属性

给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动,另外在 IE6 中还需要触发 hasLayout ,例如为父元素设置容器宽高或设置 zoom:1。

在添加overflow属性后,浮动元素又回到了容器层,把容器高度撑起,达到了清理浮动的效果。

#div {
  background-color: blueviolet;
   overflow: hidden;
}

#div p {
    width: 100px;
    height: 100px;
    background-color: red;
      float: right;
}

<div id="div">
    <p>float: right;</p>
</div>
        


方法三:给浮动的元素的容器添加浮动

给浮动元素的容器也添加上浮动属性即可清除内部浮动,但是这样会使其整体浮动,影响布局,不推荐使用。

#div {
      background-color: blueviolet;
      float: right;
}

#div p {
    width: 100px;
    height: 100px;
    background-color: red;
      float: right;

}

<div id="div" class="clearfix">
    <p>float: right;</p>
</div>


方法四:使用CSS的:after伪元素

结合 :after 伪元素(注意这不是伪类,而是伪元素,代表一个元素之后最近的元素)和 IEhack ,可以完美兼容当前主流的各大浏览器,这里的 IEhack 指的是触发 hasLayout。

给浮动元素的容器添加一个clearfix的class,然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素(Block element)清理浮动。

#div {
      background-color: blueviolet;
}

#div p {
    width: 100px;
    height: 100px;
    background-color: red;
      float: right;

}
.clearfix:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;  
   zoom: 1;/* 触发 hasLayout */ 
} 

<div id="div" class="clearfix">
  <p>float: right;</p>
</div>

通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格"020"或点".",并且赋予clear属性来清除浮动。需要注意的是为了IE6和IE7浏览器,要给clearfix这个class添加一条zoom:1;触发haslayout。


方法五:给浮动的元素的容器添加display

这种方法可能你见得比较少,但给浮动元素的容器也添加上display:inline-block确确实实可以解决这个清除浮动的问题。

浮动元素的容器里没有添加width:100%;那么 添加了display:inline-block 浮动元素的容器是紧紧的包裹着子元素的,而不是像块级元素那么完为100%,所以这里你可以根据自己的实践需求进行设置。

#div {
      background-color: blueviolet;
      display: inline-block;
      width: 100%;
}

#div p {
    width: 100px;
    height: 100px;
    background-color: red;
      float: right;

}

<div id="div" class="clearfix">
    <p>float: right;</p>
</div>

无width:100%:                        添加width:100%:

CSS清除浮动各种方法的更多相关文章

  1. CSS清除浮动的方法

    CSS清除浮动的方法有哪些呢?经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一.下面看今天的 ...

  2. CSS清除浮动float方法总结

    使用浮动造成的BUG: 使用浮动前:(子节点是将父节点撑开了) 代码如下 <div class="box"> <div class="d1"& ...

  3. css清除浮动的方法汇总

    这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录. 引用地址 : http://www.cnblogs.com/ForEvErNoME/p/3383539.html ------------- ...

  4. 8种CSS清除浮动的方法优缺点分析

    为什么清除CSS浮动这么难? 因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让 ...

  5. 常用的CSS清除浮动的方法优缺点分析(个人学习笔记)

    一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer"> <div class="di ...

  6. css清除浮动主要方法

    1.浮动元素尾部添加空div标签,设置css为clear:both: 缺点:如果页面浮动布局多,则需要添加较多div: 2.父级元素定义伪类:after和zoom:1: .father:after{d ...

  7. css 清除浮动的方法

    /*方法一*/ /*局部清除*/ ;visibility:hidden;display:block;clear:both;} .clr{display:inline-block;} .clr{disp ...

  8. css 清除浮动最佳方法!

    .clear:after{content:'\0020';display:block;height:0;clear:both} .clear{*zoom:1}

  9. css清除浮动大全共8种方法

    原文链接http://www.jb51.net/css/173023.html 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同 ...

随机推荐

  1. PostgreSQL中标准的SQL boolean数据类型

  2. SQL 联合查询 + XML解析

    (select a.EBILLNO, a.EMPNAME, a.APPLYDATE, b.HS_NAME, ), ),'') as SUMMARY, cast(c.XmlData as XML).va ...

  3. Bootstrap学习应用

    1.栅格式布局:     栅格只有12格  主要用于没有设计经验,自行设计网页. 起步:     导入一个CSS文件 和两个JS文件  BOOTATRAP.MIN.CSS  ---   /*IE(ht ...

  4. Guava - 并行编程Futures

    Guava为Java并行编程Future提供了很多有用扩展,其主要接口为ListenableFuture,并借助于Futures静态扩展. 继承至Future的ListenableFuture,允许我 ...

  5. Region Representaion and Description

    两类特征 外部特征(external characteristics), 如boundary 内部特征(internal characteristics), 如像素, color, texture. ...

  6. link和@import的区别

    link属于XHTML标签,而@import完全是css提供的一种方式:标签和css样式的区别就不说了,他们起到的作用区别不大,一般建议用link因为简单,@import会对页面载入有影响,影响性能l ...

  7. Codeforces Round #380 (Div. 2) 解题报告

    第一次全程参加的CF比赛(虽然过了D题之后就开始干别的去了),人生第一次codeforces上分--(或许之前的比赛如果都参加全程也不会那么惨吧),终于回到了specialist的行列,感动~.虽然最 ...

  8. meta中的viewport指令

    网页手机wap2.0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以原始大小显示,并不允许缩放. <meta name="viewport" conten ...

  9. BZOJ4310 : 跳蚤

    首先求出后缀数组,得到本质不同的子串的个数. 然后二分答案,每次先通过后缀数组求出第$mid$小的子串,然后贪心进行检验. 检验的时候,从后往前贪心,每次加入一个后缀,如果不能加了,那就划为一段. 时 ...

  10. 求平均排序MATLAB code

    A0=R(:,1:2:end); for i=1:17 A1=A0(i,:); p=sort(unique(A1)); for j=1:length(p) Rank0(A1==p(j))=j; end ...