闭合浮动元素:针对firefox用overflow:auto。针对ie用*height:1%或者zoom:1。个人觉得overflow:auto少用为妙,会有些莫明其妙的问题。
最好用这个方法:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
----------------------------------------------------------
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
-------------------------------------------------------------
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { zoom: 1; }
分享到:
相关推荐
在CSS布局中,浮动元素(float)是一种常见的布局方式,常用于创建多列布局或实现文字环绕图片的效果。然而,浮动元素会导致一个普遍的问题,即所谓的"浮动元素引起的父元素塌陷"。当子元素浮动后,它们不再占据原来...
将父容器的`overflow`属性设置为`hidden`, `auto`或`scroll`,除了控制溢出内容的显示方式,还能在标准兼容浏览器中闭合浮动元素。但这种方法可能与某些需要显示溢出内容的布局产生冲突,并且在IE6/7中需要特殊处理...
因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为,具体如何处理呢? 有一种做法就是在父容器内再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器...
提示:本文不是教程,而是对闭合浮动元素的方法在某个特定情况下的现象的讨论,涉及float、clear、overflow、:after等知识,新手勿入。 float属性在页面排版上非常有用,但是也带来很多问题。最常见的就是浮动元素...
将父容器的`overflow`属性设置为`hidden`、`auto`或`scroll`,这会在标准浏览器中触发“块级格式化范围”,从而闭合浮动元素。但这种方法在IE6和7中不适用,需要通过触发`layout`来解决。 4. **触发`layout`** ...
这种情况下,我们就需要采取措施来闭合浮动元素,确保父容器能够正确包裹住它们。 首先,一种传统的方法是在父容器内部添加一个额外的元素,使用`clear:both`样式来清除浮动。这可以通过在HTML中插入一个空的`...
- 将父容器的`overflow`属性设置为`hidden`、`auto`或`scroll`,除了控制溢出内容外,还能在标准兼容的浏览器中闭合浮动元素。但不适用于所有情况,因为`overflow`可能会影响其他布局和滚动行为。 3. **触发`...
闭合浮动元素也就是清除浮动,在jb51.net多次被提及,然后很多CSSer对此并不是非常了解,往往未闭合浮动元素,造成页面混乱的状况。 闭合浮动元素也就是清除浮动,在jb51.net多次被提及,然后很多CSSer对此并不是...
本来想把这个题目修改为“闭合浮动元素”或“清除浮动元素”,但想了一下,还是不修改为好。因为从这个题目我们可以更加容易的看出,如果您没有闭合(清除)浮动元素,它将造成的后果是—–div的高度不能自动增加。...
复制代码代码如下: height:auto !important; height:550px;...然后我们再利用它来清除浮动(闭合浮动元素),并隐藏这个内容。 这种方法兼容性一般,但经过各种 hack 也可以应付不同浏览器了,同时又可以保
额外标签法 这种方法就是向父容器的末尾再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器。这种方法浏览器兼容性好,没有什么问题,...然后我们再利用它来清除浮动(闭合浮动元素),并隐藏这个内容。
确保正确闭合浮动元素,并使用`clear:both`来清除浮动,防止后续元素跟随浮动。 10. **高度自适应**: - 包含浮动元素的容器在Firefox中可能会出现高度塌陷,使用`overflow:hidden`或`zoom:1`触发IE的布局属性,以...