`
ayue222
  • 浏览: 49502 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

CSS clearfix【解决容器不能根据内容自动撑开的问题】

阅读更多
.clearfix {zoom:1;}   
.clearfix:after {   
    content:'.';   
    display:block;   
    visibility:hidden;   
    clear:both;   
    height:0px;   
    font-size:0;   
    line-height:0px;   
}


使用 <div class="clearfix"><div>xxx</div></div>
分享到:
评论

相关推荐

    用clearfix:after消除css浮动解决外部div不能撑开问题

    在本例中,我们将探讨如何使用`clearfix:after`来消除浮动并确保外部`div`能根据内部浮动元素自动调整高度。 浮动元素的特性是它们会脱离常规文档流,只在其内容区域内占用空间,而不影响其他非浮动元素的布局。当...

    css之clearfix的用法深入理解(必看篇)

    `clearfix`方法的优点在于,它不需要修改HTML结构,只需要在CSS中添加一个类,就能有效地解决浮动元素引起的父元素高度塌陷问题,使得外部容器能正确包裹内部的浮动元素。这种方法在现代Web开发中非常常见,是处理...

    浅谈css清除浮动(clearfix和clear)的用法

    如果浮动元素没有被正确地清除,父容器将不能自动扩展其高度以包含浮动的子元素,这就可能导致布局上的问题。 为了解决由浮动引起的高度塌陷问题,开发人员通常会使用清除浮动(clear floats)的技术。在本文中,...

    浏览器不兼容问题解决方案[归类].pdf

    在IE中,内容会自动撑开容器的高度。如果需要固定高度,可以使用`min-height`代替,并确保内容的布局能够适应不同浏览器的处理方式。 3. **内容撑破容器的横向问题**: 如果浮动元素(`float`)没有定义宽度,FF和...

    浏览器兼容性问题

    - **问题描述**:在某些情况下,元素的高度可能无法根据内容自动适应。 - **解决方法**:使用CSS的`min-height`或Flexbox布局来确保元素的高度能够适应内容的变化。 ##### 17. IE6下图片下有空隙产生 - **问题描述...

    DIV设置float后父容器无法定位高度的问题解决方法

    这个问题的出现,主要是因为浮动元素不再占据文档流空间,而父容器的高度是根据其内部元素的高度动态计算得出的。当子元素浮动之后,父容器就无法识别到这些浮动元素的高度,造成高度塌陷。 为了解决这个问题,我们...

    css常见的方法.docx

    当父元素不设置高度且子元素浮动时,父元素可能高度为0,这时可以用`clearfix`类或其他方式清除浮动,以便父元素能根据浮动子元素自动检测高度。 以上就是CSS中关于文字居中、选择器权重、边框样式、布局对齐等常见...

    css 不兼容性问题小结

    如果遇到内容无法自动撑开容器的情况,可能需要检查是否有浮动元素或考虑使用Flexbox或Grid布局来实现更灵活的自适应高度。 以上就是一些常见的CSS不兼容性问题及其解决策略。在实际开发中,为了保证网页在各种...

    CSS清除浮动 clearfix:after 使用技巧及兼容Firefox等符合W3C标准的浏览器

    在写HTML代码的时候,发现在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。看下面的例子: HTML4STRICT代码: ...

    css公共样式

    - 使用clearfix技术解决父元素因子元素浮动而无法自动撑开的问题。 ### 其他 - **`.overFlow{ overflow:hidden; }`** - 隐藏溢出内容,通常用于配合浮动元素使用。 通过以上解析可以看出,这套CSS公共样式规则...

    有关在ie6中不定义宽度的浮动

    在大多数现代浏览器中,不定义宽度的浮动元素会根据其内容自动调整宽度。然而,IE6却有所不同。在IE6中,如果一个浮动元素的宽度没有明确设定,它可能会出现以下问题: 1. **最小宽度**:即使内容很窄,IE6也会为...

    CSS清除浮动方法大全(小结)

    CSS清除浮动是前端开发中常见的一个问题处理方法,它主要针对的是当子元素使用了浮动(float)属性后,无法自动撑开父元素高度的问题。这是因为浮动元素脱离了标准文档流,父元素无法检测到其高度,从而导致布局问题...

    浏览器兼容性汇总

    - **IE**: 文本能正常撑开容器高度。 - **Firefox等其他浏览器**: 可能会出现文本无法撑开容器高度的情况。 **解决方案**: 使用Flex布局或Grid布局来确保文本能够撑开容器高度。 以上列举了常见的浏览器兼容性问题...

    浏览器兼容

    标准浏览器中,固定高度的容器不会像IE6那样被内容撑开。若想同时保持固定高度和自适应内容高度,可以使用 `min-height` 结合 `height: auto!important;` 的方式。 #### 五、结论 浏览器兼容性是Web开发中不可避免...

    多个div能不换行吗?

    而 Flexbox 和 Grid 布局则能自动根据子元素的大小扩展父容器,无需额外代码。 在提供的 `test1.html` 文件中,你可以尝试应用上述方法之一,观察效果。如果你遇到任何问题,欢迎随时在 CSDN 上联系我进行进一步的...

    CSS——float属性及Clear:both备忘笔记

    使用Float样式,如果没有清除浮动,那么有浮动元素的父元素容器将无法自动撑开。如果没有清除内部浮动,此时会导致浮动的父元素无法自动撑开到本身应有的高度。也就是说:当一个元素是浮动的,如果没有关闭浮动时,...

Global site tag (gtag.js) - Google Analytics