常用的清除浮动的方法

发布时间:2022-04-14 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了常用的清除浮动的方法脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

本文所讨论场景均由以下代码表示。

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就瘪下去了,因为没人撑开它了)

下面进入正题,讨论以下常见的四种清除浮动的方法,下列均能得到期待的显示结果。

(1)添加块级新元素,并设置为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节点数

(2)父元素定义 overflow: auto

CSS样式:

.outer{
  width:300px;
  border: 1px solid #ccc;
  background:red;
  overflow:auto;
}

原理分析应用了overflow:auto的元素,将会扩展它的大小以包围它所包含的元素,而浮动元素仍在父元素中占据位置,因此,.outer会扩展其大小以包含.inner。

优点代码量少

缺点易受影响。比如若父元素设置了高度,当子元素高度超过父元素时,会出现滚动条。

(3)对父元素添加伪类:after

.outer:after{
  content:"";
  display: block;
  clear:both;
}

原理分析:这种方法原理与第一种方法原理类似,都是通过添加一个元素来撑开父元素(content:""; 相当于一个空内联元素,display: block;将此空元素设为以块级元素显示,clear:both; 防止其左右有浮动元素)。不同的是,伪类不占据dom元素节点,这也是这种方法相比方法一的优点。

优点不占据dom节点,适用性广

缺点代码量多,据说对seo不友好(待求证)

(4)对父元素也设置float

.outer{
  width:300px;
  border: 1px solid #ccc;
  background:red;
  float:left;
}

原理分析:float属性有一个特性,浮动元素会延伸,从而包含其所有后代浮动元素(css权威指南P299),因此.outer会延伸其高度,以包含.inner。

优点简单易行

缺点:适用性不强,对父元素设置float可能会影响整体布局。

总结:综合来看,第三种通过伪类来清除浮动的方法比较好。不过,实际使用时,还是要根据实际场景,综合考虑选择适用的清除浮动方法。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本宝典!

脚本宝典总结

以上是脚本宝典为你收集整理的常用的清除浮动的方法全部内容,希望文章能够帮你解决常用的清除浮动的方法所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:清除