清除浮动

最新推荐文章于 2024-04-29 16:58:49 发布

当时惘然

最新推荐文章于 2024-04-29 16:58:49 发布

阅读量177

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/u010528093/article/details/51150068

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在我们对元素使用浮动的时候经常会遇到一些问题，比如如下代码：

<body>
<div>
<img src="images/thumbnail_bigben.jpg">
<p>你好</p>
</div>
</body>

div{ width:200px; border:1px #00FFFF solid; }
img{ display:block; float:right; }

浮动元素超过了父元素的边界

可以采用如下方式清除浮动（clearfix hack）：
1. overflow:auto:

div{ width:200px; border:1px #00FFFF solid; overflow:auto; }

这里写图片描述

注意：假如父元素是设置了高度的，那么这时会出现滚动轴：

div{ width:200px; height:50px;  border:1px #00FFFF solid; overflow:auto; }

这里写图片描述

也可以不出现滚轴，隐藏掉多出来的部分：

div{ width:200px; height:50px;  border:1px #00FFFF solid; overflow:hidden; }

这里写图片描述

2.增加一个HTML元素使外部容器撑开：

<div>
<img src="images/thumbnail_bigben.jpg">
<p>你好</p>
<div style="clear:both;"></div>
</div>

这里写图片描述
注意：父元素有高度时不再适用

3.使用伪元素::after

div{ width:200px; border:1px #00FFFF solid; }
img{ display:block; float:right; }
#out::after{  
    content:".";  
    height:0;  
    visibility:hidden;  
    display:block;  
    border:1px solid red;
    clear:both;  
}

思考：这种方法在实质上是和第二种方法一样的

当时惘然

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
清除浮动

在我们对元素使用浮动的时候经常会遇到一些问题，比如如下代码：<body><div><img src="images/thumbnail_bigben.jpg"><p>你好</p></div></body>div{ width:200px; border:1px #00FFFF solid; }img{ display:block; float:right; } 浮
复制链接

扫一扫

专栏目录