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

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

CSSJava 
阅读更多 
.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样式，如果没有清除浮动，那么有浮动元素的父元素容器将无法自动撑开。如果没有清除内部浮动，此时会导致浮动的父元素无法自动撑开到本身应有的高度。也就是说：当一个元素是浮动的，如果没有关闭浮动时，...

Magicbox
Global site tag (gtag.js) - Google Analytics