常用的清除浮动的方法
2018-06-24 00:53:21来源:未知 阅读 ()
本文所讨论场景均由以下代码表示。
HTML结构:
<div class="outer"> <div class="inner"></div> </div>CSS样式:
.outer{ width:300px; border: 1px solid #ccc; background:red; } .inner{ width:100px; height:100px; background: blue; float:left; }以上代码显示结果为 期待的显示结果为
分析:由上图看出,父元素未被撑开,高度为0,所以看不到其背景色。
(我理解的浮动:游泳池底有一个height可伸缩的.outer,里面放着一个.inner,有一天你对.inner设置了浮动,它就飘到游泳池的水面了(当然,它仍在.outer中占据位置,这里仅仅用来理解父元素缩小的原因,不适用于浮动其他特性的理解),于是.outer就瘪下去了,因为没人撑开它了)
下面进入正题,讨论以下常见的四种清楚浮动的方法,下列均能得到期待的显示结果。
添加块级新元素,并设置为clear:both
HTML结构:
<div class="outer"> <div class="inner"></div> <div class="new"></div> </div>CSS样式:
.new{ clear:both; }原理分析:clear:both属性会防止指定了clear的元素两边存在浮动元素。由于.new左右均不能有浮动元素,所以它必须在.inner下面找到一个位置,所以.outer就被撑开了。注意:新添加的.new一定要为块级元素,不然.new就不会换行在.inner下面找位置,而是在inner右边找位置了。
优点:易理解,不容易受其他属性设置影响
缺点:增加了dom节点数
父元素定义 overflow: auto/hidden
CSS样式:
.outer{ width:300px; border: 1px solid #ccc; background:red; overflow:auto; }原理分析:应用了overflow:auto/hidden的元素,将会扩展它的大小以包围它所包含的元素,而浮动元素仍在父元素中占据位置,因此,.outer会扩展其大小以包含.inner。(其实就是触发了BFC)
优点:代码量少
缺点:易受影响。比如若父元素设置了高度,当子元素高度超过父元素时,会出现滚动条。
对父元素添加伪元素:after
.outer:after{ content:""; display: block; clear:both; }原理分析:这种方法原理与第一种方法原理类似,都是通过添加一个元素来撑开父元素(content:""; 相当于一个空内联元素,display: block;将此空元素设为以块级元素显示,clear:both; 防止其左右有浮动元素)。不同的是,伪类不占据dom元素节点,这也是这种方法相比方法一的优点。
优点:不占据dom节点,适用性广
缺点:代码量多,据说对seo不友好(待求证)
对父元素也设置float
.outer{ width:300px; border: 1px solid #ccc; background:red; float:left; }原理分析:float属性有一个特性,浮动元素会延伸,从而包含其所有后代浮动元素(css权威指南P299),因此.outer会延伸其高度,以包含.inner。
优点:简单易行
缺点:适用性不强,对父元素设置float可能会影响整体布局。
总结:综合来看,第三种通过伪类来清除浮动的方法比较好。不过,实际使用时,还是要根据实际场景,综合考虑选择适用的清除浮动方法。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 清除浮动clearfix 2020-04-27
- 如何清除a标签或者span标签之间的默认留白间距 2020-03-19
- 高度塌陷,清除浮动---CSS必备的盒子模型知识! 2020-03-07
- 封装好通用的reset.css base.css 样式重置css文件 2020-02-25
- 清除浮动的4种方式 2020-01-17
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash