当容器的高度为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. Git学习笔记与IntelliJ IDEA整合

    Git学习笔记与IntelliJ IDEA整合 一.Git学习笔记(基于Github) 1.安装和配置Git 下载地址:http://git-scm.com/downloads Git简要使用说明:h ...

  2. HTML导航栏

    先看效果(两种,1:自己写样式,写交互,2.用jQueryUI 的menu),如下图 第一种:       第二种:   第一种样式: 然后就开始准备了,单村用js和css也可以写出来,不过既然有jq ...

  3. linux安装jdk和scala

    安装jdk 1.下载jdk 2.在linux中创建一个文件夹java,我习惯放在user下 3.上传jdk安装包到java下,然后解压 4.ect/profile下修改文件,添加环境变量 JAVA_H ...

  4. mysql-四舍五入

    四舍五入:1.format函数:select FORMAT(2.567,2); 返回:2.57select FORMAT(12562.6655,2); 返回:12,562.67 //整数部分超过三位的 ...

  5. JS 中对象的简单创建和继承

    对象的简单创建 1.通过对象直接量创建 比如 var obj = {}; 2.通过new 创建 比如 var obj = new Object(); // 相当于var obj = {}; var a ...

  6. asp.net导入Excel表

    一.导入Excel的界面这个界面很简单,代码就不列出来了.二.导入的代码我分了两部分,第一部分是点击查看数据的代码,这个是将数据导入到DataTable里面,但是还没有导入到数据库里.这里需要注意的是 ...

  7. Android TextView标签的显示

    在默认情况下,如果一个TextView中的文字太多,会跨行显示, 通过下面两个参数的设置,可以使TextView固定显示一行,未显示完成的后面用...... android:maxLines=&quo ...

  8. deep learning(1)BP神经网络原理与练习

    具体原理参考如下讲义: 1.神经网络 2.反向传导 3.梯度检验与高级优化 看完材料1和2就可以梳理清楚bp神经网络的基本工作原理,下面通过一个C语言实现的程序来练习这个算法 //Backpropag ...

  9. java中File类的常用所有方法及其应用

    创建:createNewFile()在指定位置创建一个空文件,成功就返回true,如果已存在就不创建,然后返回false.mkdir()  在指定位置创建一个单级文件夹.mkdirs()  在指定位置 ...

  10. Web Service--第一次接触web service

    Web Service 首发于开源中国 1. 背景 中国移动短信网关需求,要能够发送短信.开发材料只有一个短信发送配置:包括ID,password,code,url.一个jar包还有一个老旧的html ...