网页制作

常用的清除浮动的方法
网页制作 2024/11/15 佚名
3 2

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

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可能会影响整体布局。

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

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

标签：
清除,浮动
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
岱庙资源网 Copyright www.zgmyg.com

评论“常用的清除浮动的方法”

暂无“常用的清除浮动的方法”评论...
www.zgmyg.com 岱庙资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
岱庙资源网 Copyright www.zgmyg.com