当容器的高度为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. WinformWPF 多线程访问控件【转】

    大家知道WPF中多线程访问UI控件时会提示UI线程的数据不能直接被其他线程访问或者修改,该怎样来做呢? 分下面两种情况 1.WinForm程序 )第一种方法,使用委托: private delegat ...

  2. spoj 371 Boxes

    N个盒子围成一圈,第i个盒子初始时有Ai个小球,每次可以把一个小球从一个盒子移到相邻的两个盒子之一里.问最少移动多少次使得每个盒子中小球的个数不超过1. ΣAi<=N.1<=N<=1 ...

  3. Android实现Layout缩放动画

    最近看到Any.do的缩放效果很酷,看到一篇讲Layout缩放动画实现的文章,记录一下: http://edison-cool911.iteye.com/blog/704812

  4. javamail 利用qq邮箱做邮箱服务器,简单小demo

    首先maven: <dependency> <groupId>javax.mail</groupId> <artifactId>mail</art ...

  5. sqlite使用xcode编译

    使用xcode去开发makefile的project(Building Makefile Projects With Xcode) 新建工程,template选择 external Build Sys ...

  6. 屠龙之路_假期罢工和公主私奔_SixthDay

    摘要:屠龙少年经过一周的长途跋涉后,终于来到了传说中的周末客栈.周末客栈是屠龙之路的必经之地,屠龙少年可以在周末客栈补给干粮,修补装备,好好休息一下,以便更好的上路.周末客栈有个不成文的规定:凡入住者 ...

  7. 推荐近期15个 Node.js 开发工具

    近来Node.js 越来月流行了,这个基于Google V8 引擎建立的平台, 用于方便地搭建响应速度快.易于扩展的网络应用.在本文中,我们列出了2015年最佳的15个 Node.js 开发工具.这些 ...

  8. linux服务之ssh

    架构:c/s 开发语言:c语言 服务器端:在linux平台下部署 客户端:一般是cli界面下的ssh命令 官网:http://www.openssh.com/portable.html 25个必须记住 ...

  9. [SQL]把同一字段里的多行数据用一行显示

    declare @t table(id int,num int) insert @t , union all , union all , --select * from @t ----查询 decla ...

  10. PropertyPlaceholderConfigurer加载属性配置文件:

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...