首页 > 开发 > CSS > 正文

CSS：闭合元素和浮动元素的差别

2024-07-11 08:25:00

字体：大中小

来源：转载

供稿：网友

提示：本文不是教程，而是对闭合浮动元素的方法在某个特定情况下的现象的讨论，涉及float、clear、overflow、:after等知识，新手勿入。

float属性在页面排版上非常有用，但是也带来很多问题。最常见的就是浮动元素的闭合问题。
如果一个没有设定高度的不浮动元素的子元素浮动，则该元素的高度不会包括浮动子元素的高度，而只会包含其内部不浮动元素的高度，因为浮动元素不属于常规流向，它脱离了文档流。因此如果要元素能够自动包含浮动子元素，则需要闭合浮动元素。
目前比较常用的有3种方法：
利用浮动子元素后的元素清除浮动（包括添加1个空的元素以清除浮动）。使用:after伪元素，在元素最后插入清除。为元素设定overflow属性除“visible”之外的值。
还有1个方法可以使元素自适应高度：
浮动元素，浮动的元素会包含浮动的后代元素。
下列代码，其显示如图1所示。
提示：所列代码只是关键代码，完整代码请查看示例页面。

CSS：

p,

div{...}{

margin:5px;

}

.wrap{...}{

上一篇：CSS教程：行高line-height属性(2)

下一篇：CSS缩写优化CSS文件的体积

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

最牛同桌！我考了696分我同桌考了703分

2024-06-26 22:28:41

650分！高二女生考入北大：遗憾不能上高三

2024-06-26 22:26:16

男生估分600只考了397 妈妈：高考虽重要，但不代表所有

2024-06-26 22:23:01

唐尚珺回应是否会直播带货：有人出100万想和他合作！

2024-06-25 19:29:23

名校抢人名场面：清华、北大太拼了！

2024-06-25 19:22:14

男生高考语文满分！网友：第一次听说

2024-06-25 19:19:15

疑难解答

图片精选

网友关注