`
ant04444
  • 浏览: 23210 次
  • 性别: Icon_minigender_1
  • 来自: 广州
最近访客 更多访客>>
社区版块
存档分类
最新评论

css fix

    博客分类:
  • css
 
阅读更多
come from http://www.webtoolkit.info/css-clearfix.html


CSS clearfix
The problem happens when a floated element is within a container box, that element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow. You can use 2 methods to fix it:

{clear: both;}
clearfix


Once you understand what is happening, use the method below to “clearfix” it.
DEMO

Source code for webtoolkit.clearfix.css
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

html[xmlns] .clearfix {
display: block;
}

* html .clearfix {
height: 1%;
}
分享到:
评论

相关推荐

    postcss-100vh-fix:PostCSS插件来修复heightmin-height

    PostCSS 100vh修复 [PostCSS]插件来修复[iOS版的bug]与100vh 。 它可以在Chrome(在某些情况下,仅-webkit-fill-available会导致Chrome出现问题),iOS / iPad / MacOS Safari和[所有其他浏览器]中运行。 纯CSS...

    IE6fix的CSS沉底解决办法

    沉底,直接在CSS里实现兼容IE6的像fix一样的沉底

    DeviantART compact FIX CSS-crx插件

    DeviantART Compact CSS Fix是一种解决DeviantART上新的“ Eclipse”样式的方法。 DeviantART Compact CSS Fix是一种解决DeviantART上新的“ Eclipse”样式的方法。 它使您的通知部分设计更加紧凑和直观。 使用此...

    最常见的9种IE_css_bug及fix

    ### 最常见的9种IE_css_bug及fix:深入解析与解决方案 #### 1. 居中布局问题 在Web开发中,将元素居中是极为常见的需求。通过设置`margin: auto;`通常能够轻松实现这一目标,但在IE6中,这种方法却会遇到问题。...

    boilerplate-next-js:Next.js样板

    适用于React SSR应用程序的简单next.js样板 启动设置 安装程序包管理器。 npm install -g yarn 在控制台yarn install运行命令 在控制台yarn build运行命令 ...fix:css - formatting your css code fix - base

    css常见考题 !!css常见考题 css常见考题

    ### CSS常见考题知识点解析 #### 一、DOCTYPE与CSS兼容性问题 **知识点:** DOCTYPE声明在HTML文档头部,用于告知浏览器该文档遵循的标准。不同的DOCTYPE会影响到浏览器的渲染模式,进而影响到CSS的表现。 - **...

    Div+CSS 样式的使用演示

    但需要注意的是,浮动可能会导致父元素的高度塌陷,因此需要使用清除浮动(Clear Fix)来解决这个问题。一种常见的清除浮动的方法是使用伪类`::after`: ```css .clearfix::after { content: ""; display: table;...

    快速提升CSS编码能力的五个必备知识点

    理解`float`的清除(clear fix)和溢出(overflow)行为至关重要。熟练掌握浮动可以帮助解决布局问题。 学习资源:《Everything You Never Knew About CSS Floats》、《All About Floats》和《The Mystery Of The ...

    CSS兼容IE8代码

    .pngfix { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale'); } ``` 8. **CSS3选择器**: IE8不支持`:hover`、`:first-child`等伪类选择器,以及`nth-...

    最全的CSS浏览器兼容问题

    在网页设计中,CSS(层叠样式表)起着至关重要的作用,用于定义页面的布局和样式。然而,不同浏览器对CSS的解析和渲染存在差异,尤其是老版本的IE(Internet Explorer),如IE6.0和IE7.0,以及Firefox等。这些差异...

    Booom简洁设计互联网公司bootstrap模板_简洁 绿色 fix头部 精品 漂亮 宽屏 css3 html5 图片 商务

    Booom简洁设计互联网公司bootstrap模板_简洁 绿色 fix头部 精品 漂亮 宽屏 css3 html5 图片 商务 Booom简洁设计互联网公司bootstrap模板_简洁 绿色 fix头部 精品 漂亮 宽屏 css3 html5 图片 商务

    黑灰色css3 animation大气bootstrap模板_灰色 黑色 大图 幻灯 图片 案例 设计 企业 整站 产品 fix

    黑灰色css3 animation大气bootstrap模板_灰色 黑色 大图 幻灯 图片 案例 设计 企业 整站 产品 fix黑灰色css3 animation大气bootstrap模板_灰色 黑色 大图 幻灯 图片 案例 设计 企业 整站 产品 fix

    Quickfix CSS编辑器「Quickfix CSS Editor」-crx插件

    Quickfix是在Google Chrome中编辑CSS的一种非常简单的方法。它会自动保存每个域的修复程序,您可以轻松地打开和关闭修复程序。 非常适合于快速修复布局错误。永远不要等待下一个部署周期来完成您的更改。实时编辑您...

    jQuery插件pngFix1.2

    pngFix1.2的工作原理是通过JavaScript动态修改CSS样式和HTML结构,使IE6能够模拟实现PNG图像的透明效果。它通常会在页面加载完成后自动运行,查找并处理所有的PNG图片。不过,需要注意的是,这个过程可能会与其他...

    纯CSS装饰画

    同时,为了兼容不同浏览器,可能还需要使用条件注释(如iepngfix.htc)或渐进增强策略。例如,`index.html`和`decorative-gallery-index-jquery.html`可能是展示这些效果的示例页面,而`.DS_Store`是Mac系统下的隐藏...

    IE6PNG透明背景显示灰色--解决方法(unitpngfix.js)

    2. 然后,为了应用此脚本,你需要为那些需要透明效果的PNG图像添加特定的CSS类,例如`pngFix`。例如: ```html <img src="image.png" class="pngFix"> ``` 3. 在某些情况下,可能还需要为需要透明效果的PNG图像元素...

    9个最常见IE的Bug及其fix

    标题:“9个最常见IE的Bug及其fix” 描述:“9个最常见的IE6 Bug,快解决头疼的IE6吧” 在本文中,我们将深入探讨IE6中最为常见的九个Bug,并提供相应的解决方案,帮助Web开发者们解决这个曾经令人头疼的问题。 ##...

    css半透明效果

    .ie-opacity-fix { filter: alpha(opacity=50); /* For IE8 and earlier */ opacity: 0.5; /* For modern browsers */ } ``` 总的来说,CSS中的半透明效果是通过`opacity`、`background-color`的RGBA值以及`...

    IE兼容CSS3圆角border-radius的方法(同时兼容box-shadow,text-shadow)

    IE浏览器,尤其是早期版本,对于一些现代CSS3特性支持不足,如圆角、阴影等。本篇将详细探讨如何实现IE浏览器对CSS3圆角`border-radius`以及`box-shadow`和`text-shadow`的支持。 首先,`border-radius`属性是CSS3...

Global site tag (gtag.js) - Google Analytics