清除浮动(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;
}

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

目录
相关文章
|
1月前
|
前端开发
CSS清除浮动的八种方法
CSS清除浮动的八种方法
|
1月前
|
前端开发
css清除浮动的几种办法
css清除浮动的几种办法
23 0
|
1月前
|
前端开发
CSS 清除浮动的几种方法
CSS 清除浮动的几种方法
11 0
|
2月前
|
Web App开发 前端开发
CSS Hack是什么?ie6,7,8的hack分别是什么
CSS Hack是什么?ie6,7,8的hack分别是什么
57 0
|
6月前
|
前端开发
|
9月前
|
人工智能 前端开发 图形学
CSS基础浮动和清除浮动的分享
CSS的定位机制有3种: 标准文档流、浮动和定位。 标准文档流实际上就是一个网页内标签元素正常从上到下,从左到右排列顺序的意思,比如块级元素会独占一行,行内元素会按顺序依次前后排列。浮动(float) 浮动是个很有意思的事情:就是让任何盒子可以一行排列。
60 1
CSS基础浮动和清除浮动的分享
|
前端开发
css常见的两种清除浮动方法
css中的浮动以及清除 1. 浮动的概念 浮动是网页布局中最古老的方式,但是这种方式最开始并不是为了网页布局而生的。浮动是为了让文字环绕图片而生的。在css中,浮动是通过float属性来实现的,float属性有left和right两个值,分别表示向左浮动和向右浮动。正是因为浮动并不是为网页布局而生的,导致我们在后面在使用的时候会有很多出乎意料的方式。
|
前端开发
深入理解css浮动带来的问题及解决方法(清除浮动)
深入理解css浮动带来的问题及解决方法(清除浮动)
156 0
深入理解css浮动带来的问题及解决方法(清除浮动)
|
前端开发