您现在的位置是：网站首页> 编程资料编程资料

CSS清除浮动方法总结简要总结CSS编程中的响应式设计CSS的一些编程规范总结10个必备的CSS技巧总结css 调试方法与经验总结CSS多浏览器兼容总结(个人经验)CSS样式的基础学习总结深入CSS3 动画效果的总结详解IE下css常见问题总结及解决CSS(Cascading Style Sheet)级联样式表常用术语总结CSS学习总结

2021-09-06 901人已围观

简介在阿里云首页看到很多div都有加上:before和:after的属性.但是大都只是做了类似的如下处理,请问这样的意义是什么呢?研究了一番，原来是清除浮动用的，下面来总结下清除浮动的几种方法吧

清除浮动的原因

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

复制代码

代码如下:

请输入图片描述

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

加入空 div

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

复制代码

代码如下:

请输入图片描述

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

设定父级 div 高度

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

复制代码

代码如下:

请输入图片描述

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

设定父级 div 属性 overflow

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

复制代码

代码如下:

请输入图片描述

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

复制代码

代码如下:

请输入图片描述

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

请输入图片描述

设置父级 div 伪类 before && after

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

复制代码

代码如下:

请输入图片描述

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

复制代码

代码如下:

#a {
zoom:1
}

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

复制代码

代码如下:

上一篇：字符串过长CSS截取多余文字并用省略号显示兼容IE和FF的单行溢出文本显示省略号-CSS教程-网页制作-网页教学网css实现字符串截断并加省略号示例通过纯CSS样式实现DIV元素中多行文本超长自动省略号css样式显示省略号自定义宽度超过隐藏显示省略标记CSS省略号text-overflow超出溢出显示省略号CSS 控制字符宽度省略号效果兼容浏览器CSS文本超出div或者span时用省略号代替

下一篇：通过CSS规则禁止选中文字的实现代码CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢