脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > Div+CSS教程 > CSS清除浮动

CSS清除浮动方法总结

  发布时间：2014-06-17 17:57:23   作者：佚名   我要评论
在阿里云首页看到很多div都有加上:before和:after的属性.但是大都只是做了类似的如下处理,请问这样的意义是什么呢?研究了一番，原来是清除浮动用的，下面来总结下清除浮动的几种方法吧

清除浮动的原因

假设一个 div 内部有个浮动的 div，当内部 div 的高度要比外层的父级 div 高度大时，将会导致父级 div 高度无法随着内部 div 的高度自适应，这是由于浮动元素已经脱离了正常文档流，因此无法对父级元素产生影响。举例如下：


复制代码
代码如下:

<style>
#a {
width: 100px;
border: 1px solid #ccc;
}
#b {
height: 50px;
float: left;
border: 1px solid #ccc;
}
</style>
<div id="a">A
<div id="b">B</div>
</div>

请输入图片描述

此时，我们就需要手动来清除浮动。

加入空 div

这是我之前的做法，即在结尾处添加一个空的 div，并设置 clear: both 属性。


复制代码
代码如下:

<style>
#a {
width: 100px;
border: 1px solid #ccc;
}
#b {
height: 50px;
float: left;
border: 1px solid #ccc;
}
#clear {
clear: both;
}
</style>
<div id="a">A
<div id="b">B</div>
<div id="clear"></div>
</div>

请输入图片描述

这个方法看似简单，但是如果清除浮动的地方较多，会产生很多无意义的 div，对于整个 HTML 结构无疑是有弊端的。

设定父级 div 高度

这个方法有点 hard code，由于父级 div 无法高度自适应，因此我们可以直接给父级 div 设置一个固定的高度值，如上例，考虑到 border 的值，设定父级 div 高度为 52px。


复制代码
代码如下:

<style>
#a {
width: 100px;
height: 52px;
border: 1px solid #ccc;
}
#b {
height: 50px;
float: left;
border: 1px solid #ccc;
}
</style>
<div id="a">A
<div id="b">B</div>
</div>

 请输入图片描述

这个方法很快速但也脆弱，一旦内部浮动元素高度发生变化就无效了，所以只能应用于高度固定的场景。

设定父级 div 属性 overflow

直接给父级 div 添加 overflow: hidden 或 overflow: auto 属性，这里以 overflow: hidden 为例。


复制代码
代码如下:

<style>
#a {
width: 100px;
border: 1px solid #ccc;
overflow: hidden;
}
#b {
height: 50px;
float: left;
border: 1px solid #ccc;
}
</style>
<div id="a">A
<div id="b">B</div>
</div>

 请输入图片描述

这个看上去又简单又实用，但是你不能对父级 div 设置高度，一旦父级 div 设置了固定高度，那么浮动元素超出的部分也会被隐藏。


复制代码
代码如下:

<style>
#a {
width: 100px;
height: 20px;
border: 1px solid #ccc;
overflow: hidden;
}
#b {
height: 50px;
float: left;
border: 1px solid #ccc;
}
</style>
<div id="a">A
<div id="b">B</div>
</div>

请输入图片描述

当使用 overflow: auto 属性同时设定固定高度时效果为：

请输入图片描述

设置父级 div 伪类 before && after

这个方法即问题中介绍的新方法，对父级 div 设置伪类 before 和 after 的值。


复制代码
代码如下:

<style>
#a {
width: 100px;
border: 1px solid #ccc;
}
#a:before, #a:after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
#b {
height: 50px;
float: left;
border: 1px solid #ccc;
}
</style>
<div id="a">A
<div id="b">B</div>
</div>

 请输入图片描述

这个方法应该是最佳方案，即不会产生无意义的空 div，同时当父级元素高度固定时并不会影响内部的浮动元素高度。但是唯一一点就是伪类的兼容性问题。对于低版本的 IE 浏览器我们可以使用：


复制代码
代码如下:

#a {
zoom:1
}

在阅读了 @ShingChi 兄推荐的这篇博文 - http://nicolasgallagher.com/micro-clearfix-hack/ 后，我们还可以进一步地简化代码如下：


复制代码
代码如下:

<style>
#a {
width: 100px;
border: 1px solid #ccc;
}
#a:before, #a:after {
content: "";
display: table;
clear: both;
}
#b {
height: 50px;
float: left;
border: 1px solid #ccc;
}
</style>
<div id="a">A
<div id="b">B</div>
</div>

相关文章

  • 简要总结CSS编程中的响应式设计

    这篇文章主要介绍了CSS编程中的响应式设计,是CSS入门学习中的基础知识,需要的朋友可以参考下
    2015-08-03

  • CSS的一些编程规范总结

    这篇文章主要介绍了CSS的一些编程规范总结,文中所列基本上得到多数开发者的共识,树立统一规范有助于debug等工作的进行,因而强烈推荐此文!需要的朋友可以参考下
    2015-07-09

  • 10个必备的CSS技巧总结

    这篇文章主要介绍了10个必备的CSS技巧总结,随看随记,敬请收藏~需要的朋友可以参考下
    2015-06-29

  • css 调试方法与经验总结

    主要记录本人调试过程中所终结的经验与方法，css关系到界面的美观，有时候功能实现了。界面确丑到没人用，终归还是一件失败的产品
    2014-06-15

  • CSS多浏览器兼容总结(个人经验)

    多浏览器兼容一直都是前端开发者需要考虑的重要问题之一，由于一直困扰着大家，因此本文整理了一些个人的实战经验与大家分享下，看过之后感觉不错的可以收藏哦
    2013-10-30

  • CSS样式的基础学习总结

    进行css布局的同时，没有足够的基础知识是不可能的，本文为初学者整理了一些，经常使用的css属性，感兴趣的朋友可以参考下，或许有所帮助
    2013-10-05

  • 深入CSS3 动画效果的总结详解

    本篇文章是对,CSS3中的动画效果进行了详细的分析介绍。需要的朋友参考下
    2013-05-09

  • IE下css常见问题总结及解决

    本文整理了ie中div的垂直居中问题、margin加倍的问题、ie6下页面min-width/height与max-width/height问题、ie6 3px bug及ie6捉迷藏的问题等等，感兴趣的朋友可以参考下哈
    2013-04-01

  • CSS(Cascading Style Sheet)级联样式表常用术语总结

    CSS（Cascading Style Sheet ）级联样式表总结,如果使用CSS不要忘记写DOCTYPE等文档类型定义,接下来详细为您介绍，需要了解的朋友可以参考下
    2013-01-03

  • CSS学习和总结

    本文是小编日常整理了关于css学习和总结相关知识，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起学习吧
    2022-09-29

最新评论

关注微信公众号

扫一扫