 上传我的文档
 下载
 收藏
毕业于医学院校，在医院工作，有相对丰富的护理经验
 下载此文档
正在努力加载中...
3种常用CSS清除浮动的常用方法
下载积分：1500
内容提示：3种常用CSS清除浮动的常用方法
文档格式：DOC|
浏览次数：0|
上传日期： 02:45:17|
文档星级：
该用户还上传了这些文档
3种常用CSS清除浮动的常用方法
官方公共微信欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
> CSS清除浮动方法集合
一、浮动产生原因
一般浮动是什么情况呢？一般是一个盒子里使用了浮动属性，导致父级对象盒子不能被撑开，这样 就产生了。
浮动产生样式效果截图
本来两个黑色对象盒子是在红色盒子内，因为对两个黑色盒子使用了浮动，所以两个黑色盒子产生了，导致红色盒子不能撑开，这样浮动就产生了。
简单地说，浮动是因为使用了或或两者都是有了而产生的浮动。
二、浮动产生负作用
1、背景不能显示
由于浮动产生，如果对父级设置了（）或，而父级不能被撑开，所以导致不能显示。
2、边框不能撑开
如上图中，如果父级设置了属性（），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。
3、margin padding设置值不能正确显示
由于浮动导致之间设置了css padding、属性的值不能正确表达。特别是上下边的padding和不能正确显示。
三、css解决浮动，清除浮动方法
这里为了统一讲解浮动解决方法，假设了有三个盒子对象，一个父级里包含了两个子级，子级一个使用了float:left属性，另外一个子级使用float:right属性。同时设置，父级css边框颜色为红色，两个子级边框颜色为蓝色；CSS背景样式为黄色，两个子级背景为白色；父级宽度为400px，两个子级均为180px，两个再设置相同100px，父级高度暂不设置（通常为实际时候这样父级都不设置高度，而高度是随内容增加自适应高度）。
父级为&.divcss5&对应使用&& class=&divcss5&&&
两个子级CSS命名分别为&.divcss5-left&&.divcss5-right&
根据以上描述DIVCSS5给出对应和片段
.divcss5{&width:400&border:1px&solid&#F00;&background:#FF0}&.divcss5-left,.divcss5-right{&width:180&height:100&&border:1px&solid&#00F;&background:#FFF}&.divcss5-left{&float:left}&.divcss5-right{&float:right}&
对应片段：
&class=&divcss5&&&&&&&class=&divcss5-left&left浮动&&&&&&class=&divcss5-right&right浮动&&
清除浮动前案例截图父级需要清除浮动
以下DIVCSS5总结了几点用于清除浮动的经验教程
1、对父级设置适合CSS高度
对父级设置适合高度样式清除浮动，这里对&.divcss5&设置一定高度即可，一般设置高度需要能确定内容高度才能设置。这里我们知道内容高度是100PX+上下边框为2px，这样具体父级高度为102px
.divcss5{&width:400border:1px&solid&#F00;background:#FF0;&height:102px}&.divcss5-left,.divcss5-right{width:180height:100&border:1px&solid&#00F;background:#FFF}&.divcss5-left{&float:left}&.divcss5-right{&float:right}&
代码不变。得到截图
使用height高度清除浮动
小结，使用设置高度样式，清除浮动产生，前提是对象内容高度要能确定并能计算好。
2、清除浮动
为了统一样式，我们新建一个样式选择器CSS命名为&.clear&，并且对应选择器样式为&clear:both&，然后我们在父级&&/div&&结束前加此div引入&class=&&&样式。这样即可清除浮动。
具体CSS代码：
.divcss5{&width:400border:1px&solid&#F00;background:#FF0}&.divcss5-left,.divcss5-right{width:180height:100&border:1px&solid&#00F;background:#FFF}&.divcss5-left{&float:left}&.divcss5-right{&float:right}&.clear{&clear:both}&
Html代码：
&class=&divcss5&&&&&&&class=&divcss5-left&left浮动&&&&&&class=&divcss5-right&right浮动&&&&&&class=&clear&&&
clear清除浮动截图
clear清除浮动截图&使用CSS clear清除浮动
这个清除float产生浮动，可以不用对父级设置高度 也无需技术父级高度，方便适用，但会多加CSS和HTML标签。
3、父级div定义 overflow:hidden
对父级CSS选择器加overflow:hidden样式，可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。
overflow:hidden解决CSS代码：
.divcss5{&width:400border:1px&solid&#F00;background:#FF0;&overflow:hidden}&.divcss5-left,.divcss5-right{width:180height:100border:1px&solid&#00F;background:#FFF}&.divcss5-left{&float:left}&.divcss5-right{&float:right}&
HTML代码不变。
解决清除浮动后截图
overflow清除float产生浮动截图&overflow:hidden清除浮动截图
为什么加入overflow:hidden即可清除浮动呢？那是因为overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容（包括使用float的div盒子），从而实现了清除浮动。Css overflow:hidden清除浮动方法推荐使用。
以上三点即是兼容各大浏览器清除浮动的方法，其它有的浏览器不兼容有的不兼容的方法就没必要介绍了，大家记住以上三点解决float浮动清除浮动方法。但这里推荐第三点和第二点解决清除浮动方法。如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • ()• • ()• ()• • • • • • • • • • • • • • • • 必备HTML基础教程 Essential HTML Tutorials •
• () • () • () •
• () •
• () •
• 如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 13:48
原创：本文 DIVCSS5版权所有。最新文章NEWS• • • • • • • • • • CSS EFFECTS相关文章RELATED• • • • • • • • • • 热点文章HOT
学习与资源分享平台讲讲如何去除浮动？ - 简书
下载简书移动应用
写了99041字，被152人关注，获得了427个喜欢
讲讲如何去除浮动？
第一次电话面试，面试哥哥问我你都知道哪些去除浮动的办法？我是这样回答的“有两种方法，一种是在需要去除浮动的元素上使用“clear：both”；另一种是在浮动元素的父元素使用"overflow:hidden"。说实话当时说第二种方法时，我并没有实践过，只是看过，然后含含糊糊的说了。
第二次面试，也问到了这个问题，但是由于第一次电面的教训，我回去就看了看书，《css设计指南》里面有专门的一章讲去除浮动的几种方法，可是时间紧，我只是看了书一遍，并没有用手敲过。所以问的时候，我就1234罗列啦一下。1、clear:both；2、overflow:3、浮动父元素4、在浮动元素的后面添加一个去除浮动的元素。后来面试姐姐，就又补充道，“你看看这个水平导航栏，肯定是用浮动实现的，那么他肯定不能用overflow:这个，应为万一这个当行栏有子菜单，那不就看不见了么,，怎么解决呢”我当时回答的是在浮动元素的后面添加一个去除浮动的元素，那位面试姐姐也没有说对错，到底是对是错，还是需要自己做一个导航，就知道了。
，今天呢，我就再写一篇笔记，有关去除浮动，内容来自于《css设计指南》这本书。
浮动带来的影响
块级元素浮动后浏览器会收回块级元素原来占据的空间，原来紧跟其后的元素就会在空间允许的情况下，向上提升到与浮动元素平起平坐。而设置浮动的块级元素本身就保持原来的位置，默默地看着他影响的元素改变。该浮动元素的父元素的边框也会收缩至父元素内没有设置浮动的子元素。
行内元素浮动后其实这个貌似在我目前做的练习上没有看过有这样进行设置的，但是他确实也带来了不一样的体验。
现代浏览器的表现放置两个相邻的行内元素，如果设置第二个行内元素为左浮动，那么该行内元素被设置浮动后，其display会被修改为block；但是其大小会根据设置或其内容的大小进行表现。并不会占据整行的空间，其旁边的行内元素，就会在这一行的浮动元素后面，并不会与浮动元素平起平坐。但是如果其旁边是设定了宽度的行内块级元素，那么这个行内块级元素也会在浮动元素后面。如果其旁边是块级元素，那么这个块级元素会占据该设置浮动的行内元素的空间。如果说原因，我也说不上来。
在IE7及以前版本的ie浏览器旁边的行内元素会在浮动元素另起一行的下面，是不是更奇怪。
至于行内元素的浮动，我在参考其他网站源代码时，并没有遇到过，所以我就先放一放。
接下来就是围住浮动元素的几种方法，及各个方法的适应场合。
方法一：为父元素添加：overflow:hidden这种方法强制父元素包围浮动的子元素。实际上：overflow：hidden声明的真正用途是防止包含元素被超大的内容撑大。应用overflow：hidden之后，包含元素依然保持其设定的宽度及高度，而超大的字内容会被容器切掉。除此之外，overflow:hidden还有一个作用，即它能可靠的迫使父元素包含其浮动的子元素。但是，带来的后果就是字内容一旦超出设定宽度就会看不见。
方法二：同时浮动父元素其实这个对于整个网站布局并不算的上是清楚浮动，只是使得父元素包围住了浮动的子元素，但是父元素浮动虽然包围住了浮动子元素，但却没能解决父元素自身的浮动对整个网站布局的影响，我看到有些网站的源码还是会喜欢用这种方法，然后再在这个浮动父元素的外面再包围一个父元素，并为他设置宽度，高度，以保证不影响网页中其他内容的布局。
方法三：添加非浮动的清除元素就是给父元素的最后添加一个非浮动的子元素，然后清除该子元素的浮动。然而在包含元素的最后添加子元素作为清除元素的方式有两种。
简单的在html标记中添加一个子元素，并给他应用clear属性。
&section &
&img src="7f0ff.png" alt="" style="float:left" /&
&p&it s fun to float&/p&
&div style="clear:"&&/div&
&/section&
here is the footer element.
但是如果，我们特别不想添加这个纯表现元素，可以采用css来添加这个清除元素。为section添加一个类：.clearfix.clearfix:after{
content: '.';
height: 0;
visibility:
这三种方法都利用父元素进而实现，围住浮动的子元素。分析一下这三个方法：1、不能在下拉菜单的顶级元素上应用overflow:hidden；否则作为其子元素的下拉菜单就不会显示啦。2、不能对已经自动外边距居中的元素使用浮动父元素技术，否则他就不会再居中。但是如果某些场合没有父元素时怎么办？我肯定会说，再加个呗，由不费事，但是这样会增加遍历深度，如果某个元素既希望自身受到浮动元素影响，又不希望他之后的元素受到这个浮动元素影响，可以在这个元素的内部添加一个块级元素，然后再为这个块级元素清除浮动，还有一点需要注意，这个元素千万不要自己多余设置个高度，否则效果不会显现出来，希望看到这篇文章的人可亲测。
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
被以下专题收入，发现更多相似内容：
· 2010人关注
前端开发学习、总结
· 1345人关注
生活是一条不知通向何处的路，或曲曲折折，或坎坎坷坷，正是因为不知要到何处去，才有不同的惊喜和景色。
· 61人关注
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
选择支付方式：css清除浮动的几种方法整理 - madwoman - 推酷
css清除浮动的几种方法整理 - madwoman
此为未清除浮动源
代码，运行代码无法查看到父级
元素浅黄色背景。
&style type=&text/css&&
*{margin:0;padding:0;}
body{font:36 color:#F00; text-align:}
#layout{background:#FF9;}
#left{float:width:20%;height:200background:#DDD;line-height:200}
#right{float:width:30%;height:80background:#DDD;line-height:80}
&div id=&layout&&
&div id=&left&&Left&/div&
&div id=&right&&Right&/div&
未清除浮动前如图所示：
四种清除浮动方法如下：
标签清除浮动。
我用了很久的一种方法，空标签可以是div标签，也可以是P标签。
这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动，并为其定义
CSS代码：clear:both。
此方法的弊端在于增加了无意义的结构元素。
对于使用额外标签清除浮动（闭合浮动元素），是W3C推荐的做法。
&br /&元素还是空&div&&/div&可以根据自己的喜好来选（当然你也可以使用其
它块级元素）。
不过要注意的是，&br /&本身是有表现的，它会多出一个换行出
来，所以要设定它的heigh为0，以隐藏它的表现。所以大多数情况下使用空
&div&比较合适。
&style type=&text/css&&
*{margin:0;padding:0;}
body{font:36 color:#F00; text-align:}
#layout{background:#FF9;}
#left{float:width:20%;height:200background:#DDD;line-height:200}
#right{float:width:30%;height:80background:#DDD;line-height:80}
.clear{clear:}
&div id=&layout&&
&div id=&left&&Left&/div&
&div id=&right&&Right&/div&
&div class=&clear&&
2、使用overflow
此方法有效地
解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。
使用该方法是只需在需要清除浮动的元素中定义CSS属性：
overflow:auto，即可！也可以用overflow:hidden；”zoom:1″用于兼容IE6，也可以用width:100%。
不过使用overflow的时候，可能会对
页面表现带来影响，而且这种影响是不确定
的，你最好是能在多个
浏览器上测试你的页面；
&style type=&text/css&&
*{margin:0;padding:0;}
body{font:36 color:#F00; text-align:}
#layout{background:#FF9;overflow:zoom:1; }
/* overflow:auto可以换成overflow:hidden，zoom:1可以换成width:100%*/
#left{float:width:20%;height:200background:#DDD;line-height:200}
#right{float:width:30%;height:80background:#DDD;line-height:80}
&div id=&layout&&
&div id=&left&&Left&/div&
&div id=&right&&Right&/div&
3、使用after伪对象万能清除浮动
。具体写法可参照以下示例。
&style type=&text/css&&
*{margin:0;padding:0;}
body{font:36 color:#F00; text-align:}
#layout{background:#FF9;}
#layout{*zoom:1}
#layout:after{content:'\20';display:height:0;clear:both}
#left{float:width:20%;height:200background:#DDD;line-height:200}
#right{float:width:30%;height:80background:#DDD;line-height:80}
&div id=&layout&&
&div id=&left&&Left&/div&
&div id=&right&&Right&/div&
4、浮动外部元素，
float-in-float。这种方法很简单，就是把“#outer”元素也进行浮动（向左或者向右）。
但是这种方法带来的别外一个问题就是和“#outer”相邻的下一个元素会受到
“#outer”的影响位置会产生变化，所以使用这种方法一定要小心。
选择把页面
中的所有元素都浮动起来，最后使用一个适当的有意义的元素（比如页脚）进行
清理浮动，这有助于减少不必要的标记，但是过多的浮动会增加布局的难度。
&style type=&text/css&&
*{margin:0;padding:0;}
body{font:36 color:#F00; text-align:}
#layout{background:#FF9;float:}
#left{float:width:20%;height:200background:#DDD;line-height:200}
#right{float:width:30%;height:80background:#DDD;line-height:80}
&div id=&layout&&
&div id=&left&&Left&/div&
&div id=&right&&Right&/div&
已发表评论数()
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
排版有问题
没有分页内容
视频无法显示
图片无法显示}