开发者社区> marsggbo> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

清除浮动(clearfix hack)

简介: 清除浮动(clearfix hack) 在使用浮动的时候经常会遇到一个古怪的事情: img { float: right; } 不......这个图片比包含它的元素还高, 而且它是浮动的,于是它就溢出到了容器外面! 见证奇迹的时刻到了!有一种比较丑陋的方法可以解决这个问题,它叫做清除浮动(clearfix hack). 让我们加入一些新的CSS样式: .clearfix { overflow: auto; } 现在再看看发生了什么: 好多了! 这个可以在现代浏览器上工作。
+关注继续查看

清除浮动(clearfix hack)

在使用浮动的时候经常会遇到一个古怪的事情:

img {
  float: right;
}
<div>An Image

不......这个图片比包含它的元素还高, 而且它是浮动的,于是它就溢出到了容器外面!

见证奇迹的时刻到了!有一种比较丑陋的方法可以解决这个问题,它叫做清除浮动(clearfix hack).

让我们加入一些新的CSS样式:

.clearfix {
  overflow: auto;
}

现在再看看发生了什么:

<div class="clearfix">An Image

好多了!

这个可以在现代浏览器上工作。如果你想要支持IE6,你就需要再加入如下样式:

.clearfix {
  overflow: auto;
  zoom: 1;
}

有些独特的浏览器需要“额外的关照”。清除浮动这谭水很深很深,但是这个简单的解决方案已经可以在今天所有的主要浏览器上工作。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
css常见的两种清除浮动方法
css中的浮动以及清除 1. 浮动的概念 浮动是网页布局中最古老的方式,但是这种方式最开始并不是为了网页布局而生的。浮动是为了让文字环绕图片而生的。在css中,浮动是通过float属性来实现的,float属性有left和right两个值,分别表示向左浮动和向右浮动。正是因为浮动并不是为网页布局而生的,导致我们在后面在使用的时候会有很多出乎意料的方式。
0 0
CSS怪异盒子 | 学习笔记
快速学习CSS怪异盒子
0 0
深入理解css浮动带来的问题及解决方法(清除浮动)
深入理解css浮动带来的问题及解决方法(清除浮动)
0 0
css清除浮动的方法
今天写页面突然用到要清除浮动的样式,然后就想不去起来了(尴尬)
0 0
CSS 清除浮动方法小结
清除浮动其实主要解决的就是高度塌陷问题,具体在此不再赘述~~~那些年我们一起清除过的浮动(大佬博客,写的挺不错) 方法小结:1. 1)添加额外标签 这是在学校老师就告诉我们的 一种方法,通过在浮动元素末尾添加一个空的标签例如 ,其他标签br等亦可。
844 0
CSS技巧(一):清除浮动
什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素, 在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。
887 0
问题与对策:CSS的margin塌陷(collapse)
    对于以下简单代码: 点击(此处)折叠或打开 !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> html> head> title>/title> meta name="" ...
502 0
+关注
marsggbo
AutoML
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载