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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了css清除浮动大全，共8种方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5960字，纯文字阅读大概需要9分钟。

内容图文

清除浮动是每一个 web前台设计师必须掌握的机能。

为什么浮动这么难？

因为浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。

而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。

解决浮动引起的问题有多种方法，但有些方法在浏览器兼容性方面还有问题。

我根据自己的经验总结8种清除浮动的方法（测试已通过 ie chrome firefox opera，后面三种方法只做了解就可以了）：

1，父级div定义 height

.div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;}

.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}

.left{float:left;width:20%;height:200px;background:#DDD}

.right{float:right;width:30%;height:80px;background:#DDD}

</style>

<div class="right">Right</div>

</div>

div2

</div>

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

优点：简单，代码少，容易掌握

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

建议：不推荐使用，只建议高度固定的布局时使用

评分：★★☆☆☆

2，结尾处加空div标签 clear:both

.div1{background:#000080;border:1px solid red}

.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}

.left{float:left;width:20%;height:200px;background:#DDD}

.right{float:right;width:30%;height:80px;background:#DDD}

/*清除浮动代码*/

.clearfloat{clear:both}

</style>

<div class="right">Right</div>

</div>

div2

</div>

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度

优点：简单，代码少，浏览器支持好，不容易出现怪问题

缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不爽

建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法

评分：★★★☆☆

3，父级div定义伪类:after 和 zoom

.div1{background:#000080;border:1px solid red;}

.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}

.left{float:left;width:20%;height:200px;background:#DDD}

.right{float:right;width:30%;height:80px;background:#DDD}

/*清除浮动代码*/

.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}

.clearfloat{zoom:1}

</style>

<div class="right">Right</div>

</div>

div2

</div>

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题

优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）

缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持。

建议：推荐使用，建议定义公共类，以减少CSS代码。

评分：★★★★☆

4，父级div定义 overflow:hidden

.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden}

.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}

.left{float:left;width:20%;height:200px;background:#DDD}

.right{float:right;width:30%;height:80px;background:#DDD}

</style>

<div class="right">Right</div>

</div>

div2

</div>

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

优点：简单，代码少，浏览器支持好

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

评分：★★★☆☆

5，父级div定义 overflow:auto

.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:auto}

.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}

.left{float:left;width:20%;height:200px;background:#DDD}

.right{float:right;width:30%;height:80px;background:#DDD}

</style>

<div class="right">Right</div>

</div>

div2

</div>

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度

优点：简单，代码少，浏览器支持好

缺点：内部宽高超过父级div时，会出现滚动条。

建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

评分：★★☆☆☆

6，父级div 也一起浮动

.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;margin-bottom:10px;float:left}

.div2{background:#800080;border:1px solid red;height:100px;width:98%;/*解决代码*/clear:both}

.left{float:left;width:20%;height:200px;background:#DDD}

.right{float:right;width:30%;height:80px;background:#DDD}

</style>

<div class="right">Right</div>

</div>

div2

</div>

原理：所有代码一起浮动，就变成了一个整体

优点：没有优点

缺点：会产生新的浮动问题。

建议：不推荐使用，只作了解。

评分：★☆☆☆☆

7，父级div定义 display:table

.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;margin-bottom:10px;}

.div2{background:#800080;border:1px solid red;height:100px;width:98%;}

.left{float:left;width:20%;height:200px;background:#DDD}

.right{float:right;width:30%;height:80px;background:#DDD}

</style>

<div class="right">Right</div>

</div>

div2

</div>

原理：将div属性变成表格

优点：没有优点

缺点：会产生新的未知问题。

建议：不推荐使用，只作了解。

评分：★☆☆☆☆

8，结尾处加 br标签 clear:both

.div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1}

.div2{background:#800080;border:1px solid red;height:100px}

.left{float:left;width:20%;height:200px;background:#DDD}

.right{float:right;width:30%;height:80px;background:#DDD}

.clearfloat{clear:both}

</style>

<div class="right">Right</div>

</div>

div2

</div>

原理：父级div定义zoom:1来解决IE浮动问题，结尾处加 br标签 clear:both

内容总结

以上是互联网集市为您收集整理的css清除浮动大全，共8种方法全部内容，希望文章能够帮你解决css清除浮动大全，共8种方法所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/415056.html

来源：【匿名】

【上一篇】css应用：单击table，使点击的行变色【下一篇】php无法调用css怎么办

更多 ►

【css清除浮动大全，共8种方法】教程文章相关的互联网学习教程文章

如今，这种利用CSS制作圆角的技术已经得到了大多数主流浏览器的支持，包括Safari，谷歌浏览器，IE，Opera和火狐浏览器。下面让我们来看看border-radius的语法，解释，以及IE是如何支持它的。语法和说明在CSS3中用来生成圆角效果的属性是border-radius.这个属性跟大家熟知的width等属性的用法相似：复制代码代码如下:.roundElement { border-radius: 10px;}上面的这句代码的作用是设置一个元素的四个角的弧度半径值都为10px。你也可...

让IE浏览器支持CSS3圆角属性的方法

绘出圆角：1、下载一个压缩包，里面有一个微软的脚本文件（11KB）和一个用来测试服务器是否有正确的Content-Type的HTML文件：iecss3.rar；.htc 文件是IE内核支持Web行为后用来描述此类行为的脚本文件。它们定义了一套方法和属性，程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去。Web 行为是非常伟大的因为它们允许程序员把自定义的功能“连接”到现有的元素和控件，而不是必须让用户下载二进制文件（例如ActiveX ...

IE6/7/8 CSS兼容性问题和解决方法汇总

断断续续的在开发过程中收集了好多的bug以及其解决的办法，都在这个文章里面记录下来了！希望以后解决类似问题的时候能够快速解决，也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法！1：li边距“无故”增加　　任何事情都是有原因的，li边距也不例外。　　先描述一下具体状况：有些时候li边距会突然增加很多，值也不固定（只在IE6/IE7有这种现象），让人摸不着头脑，仔细“研究”发现是由于其低级元素ul的padding引...

div+css垂直居中的五种实现方法

方法一：把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align属性。结构效果如下：CSS复制代码代码如下:div#wrapper { display: table; width: 500px; height: 500px; background-color: #c00;}div#row { display: table-row;}div#cell { display: table-cell; vertical-align: middle;}html复制代码代码如下:<div id="wrapper"> <div id="row"> <div id="cell"> ...

CSS border-style 属性使用方法

border-style -- 定义边框的样式取值:<border-style>{1,4} | inherit <border-style>{1,4}: 边框样式 inherit: 继承初始值: none 继承性: 否适用于: 所有元素 border:边框,style:样式 border-style和border-width的赋值方式是一样的,可以分别赋1,2,3或4个边的样式. border-style的取值 none: 无样式 hidden: 除了同表格的边框发生冲突的时候,其它同none dotted: 点划线 dashed: 虚线 solid: 实线 double: 双线,两条线加上中间的...

jquery操作css样式的方法【图】

jquery操作css样式的方法（设置和获取）原文：https://www.cnblogs.com/onesea/p/12902096.html

Selenium - Css Selector 使用方法【代码】

什么是Css Selector？Css Selector定位实际就是HTML的Css选择器的标签定位工具Css Selector可以下载火狐浏览器插件，FireFinder 或 FireBug和FirePath组合使用。使用方法：1. Css Selector支持ID、Class的定位与HTML中CSS定位相同定位ID：id = "navi" ->#navi定位Class: class = "inner" ->.inner多个Class定位： class = " c1 c2 c3" -> .c1.c2.c32. Css Selector支持任意属性定位[name="name"]3. Css Selector提供了标签属性组...

【CSS】CSS样式的三种引用方法【代码】

什么是CSS？CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开。　　那么，怎么在HTML中引入Css？　　第一个方法是：内联式（行间样式）：<body><div style="color:red">这是第一个div</div></...

CSS Hack的常见的五种方法.

/9 : 所有的IE均可识别，FireFox不能* :IE6.0 IE7.0 可以识别，IE8、IE9、Firefox不能_ : IE6可以识别，IE7 IE8 IE9 Firefox不能*html ： IE6可以识别，IE7 IE8 IE9 Firefox不能!important ： IE6.0 IE7 IE8 IE9 Firefox都可以识别原文：http://www.cnblogs.com/hellome/p/3776726.html

[转载]CSS各种居中方法

水平居中的text-align:center 和 margin:0 auto 这两种方法都是用来水平居中的，前者是针对父元素进行设置而后者则是对子元素。他们起作用的首要条件是子元素必须没有被float影响，否则一切都是无用功。margin:0 auto也可以被写成margin:0 auto 0 auto。不能理解的童鞋们可以自己去找找关于css缩写的内容。垂直居中的line-height 什么？！margin在垂直居中里不起作用了？显然事情确实如此，我们仅有margin:0 auto的用法而没有auto...

纯CSS气泡框实现方法探究【图】

气泡框（或者提示框）是网页中一种很常见的元素，大多用来展示提示信息，如下图所示：拆分来看，形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头，要制作出这样的气泡框，如果解决了三角形小箭头就容易了。一种方法就是制作这样一个三角形箭头的图片，然后定位在矩形框上。但这种解决办法在后期更改气泡框会很不方便，可能每修改一次气泡框都要重新制作一个三角形小图标。如果我们能够直接用HTML和CSS代码实现这样...

学CSS网页布局排查错误的方法

虽然浏览器可能存在着很多Bug，但是并不是与自己感觉不一样的时候就是出现了Bug。产生问题的原因可能有很多种，因此制作者需要一定的方法来排查问题。虽然浏览器可能存在着很多Bug，但是并不是与自己感觉不一样的时候就是出现了Bug。产生问题的原因可能有很多种，因此制作者需要一定的方法来排查问题。选择一个先进的浏览器进行测试是明智的做法，例如对CSS 2.1支持比较好的Opera 9.2、Firefox 2.0或者Safari 3.0，而不要使用IE 6作...

深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法【代码】

×目录[1]动态样式[2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除前面的话　　我们可以通过计算样式来读取伪元素的样式信息，但是却无法使用javascript来直接操作伪元素，本文以一个需求解决为例，详细介绍脚本化伪元素的6种方法需求说明　　【1】为id=box的div元素添加content="前缀"的:before伪元素　　【2】为已经添加:before伪元素的div元素删除伪元素　　 [注意]由于IE7-浏览器不支持:before伪元...

关于动画Animate.css的使用方法【代码】

首先贴个官网：https://daneden.github.io/animate.css/1、引入animate css文件 1<head>2<link rel="stylesheet" href="animate.min.css">3</head> 　　2、给指定的元素加上指定的动画样式名<div class="animated bounceOutLeft"></div>　　这里包括两个class名，第一个是基本的，必须添加的样式名，任何想实现的元素都得添加这个。第二个是　　指定的动画样式名。　　3、如果说想给某个元素动态添加动画样式，可以通过jquery来实现...

用css3选择器给你要的第几个元素添加不同样式方法【转发】【代码】

下面我们来了解一下css选择器里面的几个:only-childp:only-child选择属于其父元素的唯一子元素的每个 <p> 元素。3:nth-child(n)p:nth-child(2)选择属于其父元素的第二个子元素的每个 <p> 元素。3:nth-last-child(n)p:nth-last-child(2)同上，从最后一个子元素开始计数。3:nth-of-type(n)p:nth-of-type(2)选择属于其父元素第二个 <p> 元素的每个 <p> 元素。3:nth-last-of-type(n)p:nth-last-of-type(2)同上，但是从最后一个子元素开...

CSS - 技术教程分类

CSS 教程 CSS 简介 CSS 语法 CSS Id 和 Class选择器 CSS 创建 CSS Backgrounds(背景) CSS Text(文本) CSS Fonts(字体) CSS 链接(link) CSS 列表 CSS Table(表格) CSS 盒子模型 CSS Border(边框) CSS 轮廓（outline）属性 CSS margin(外边距) CSS padding（填充） CSS 尺寸 (Dimension) CSS Position(定位) CSS Overflow CSS Float（浮动） CSS 对齐 CSS 伪类 CSS 伪元素 CSS 导航栏 CSS 下拉菜单 CSS 提示工具 CSS 图像透明/不透明 CSS 图像拼合技术 CSS 媒体类型 CSS 属性选择器 CSS 表单 CSS 计数器 CSS 网页布局 CSS 总结 CSS 实例 Viewport 媒体查询图片视频(Video) 框架 CSS 参考手册 CSS 选择器 CSS Web安全字体 CSS 动画 CSS 单位 CSS 颜色 CSS 颜色值 css 全部

CSS - 最热教程

设置DIV的背景色有哪几种方法 js批量设置元素样式和封装似于jquery的...HTML5实战与剖析之CSS选择器——getEle...css如何设置文本元素内的空白填充？如何压缩css文件 cssright属性怎么用 cssanimation-timing-function属性怎么...jquery设置内联样式css()jQuery+HTML5+CSS3制作支持响应式布局时...jquery实现动态改变css样式的方法分析

首页 / CSS / css清除浮动大全，共8种方法

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【css清除浮动大全，共8种方法】教程文章相关的互联网学习教程文章

纯CSS3实现圆角效果（含IE兼容解决方法）

让IE浏览器支持CSS3圆角属性的方法

IE6/7/8 CSS兼容性问题和解决方法汇总

div+css垂直居中的五种实现方法

CSS border-style 属性使用方法

jquery操作css样式的方法【图】

Selenium - Css Selector 使用方法【代码】

【CSS】CSS样式的三种引用方法【代码】

CSS Hack的常见的五种方法.

[转载]CSS各种居中方法

纯CSS气泡框实现方法探究【图】

学CSS网页布局排查错误的方法

深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法【代码】

关于动画Animate.css的使用方法【代码】

用css3选择器给你要的第几个元素添加不同样式方法【转发】【代码】

CSS - 相关标签

CSS - 技术教程分类

CSS - 最新教程

CSS - 最热教程