标签: clearfix

960 grid的clearfix vs HTML5 Boilerplate的clearfix - 有什么区别？

这是Nathan Smith的960网格css中的clearfix:

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.clearfix:after {
  clear: both;
}

/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix {
  zoom: 1;
}

这是Paul Irish的HTML5 Boilerplate中的clearfix:

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
   j.mp/bestclearfix */

.clearfix:before, .clearfix:after {
    content: …

我想clearfix从我的HTML中删除该类,并在我的SCSS(Rails 3.1应用程序)中包含clearfix mixin.对此最好的方法是什么？

我正在考虑将HTML 5 Boilerplate clearfix转换为mixin,然后在CSS中包含需要clearfixing的元素.

从HTML5 Boilerplate复制:

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements. http://j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }

/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin padding-bottom-of-page */
.clearfix { zoom: 1; }

这有缺点吗？有没有更好的办法？我可以通过这种方式安全地从我的HTML标记中删除clearfix吗？

我有一个表单布局,我想显示左对齐的标签和右对齐的表单控件.我一直试图让它使用浮点数:在窗体控件(在这种情况下为a)上然后应用clearfix类,但clearfix似乎不在我的选择框上工作.

这里有什么问题或者clearfix不适用于select元素吗？

但是,当我这样做时,选择框仍然延伸到包含div的底部之外.

我的代码:

<style type="text/css">
#category-select {
left: 0px;
top: 0px;
width: 350px;
border: 1px solid #666;
}
select#category {
float: right;
}
select.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
</style><!-- main stylesheet ends, CC with new stylesheet below... -->
<!--[if IE]>
<style type="text/css">
  select.clearfix {
    zoom: 1;  
  }  
</style>
<![endif]-->

<div id="triage">
    <div id="category-select">
          Category: 
          <select class="ipad-dropdown clearfix" id="category" name="category">
                <option value="A">A - Emergency
                <option value="B">B - Urgent
                <option value="C">C - ASAP …

我使用clearfix来清除浮动.但问题是,在<li>和中有不同的高度<div>.li.clearfix高度是32px,但div.clearfix高度是18px.当我删除时.clearfix:before,它们都是一样的.但是,当在bootstrap中尝试时,它失败了.(我删除了.clearfix:before引导程序,但高度仍有差异.)

<style>
.pull-left{
   float:left;
}
.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style> 
<div class="clearfix">
    <div class="pull-left">Hello</div>
</div>
<ul>
    <li class="clearfix"><div class="pull-left">hello</div></li>
</ul>

演示:http://jsfiddle.net/nevimop/p4HMS/

浏览器(chrome safari ie10,ff没问题)

加上这个 ul{list-style: none;}高度相同.

我的问题如下:
边框不包装包含的项目.我知道这是因为我将内容项置于绝对位置,但我需要它们才能使布局工作.这也意味着我不能使用clearfix解决方案(这意味着我必须浮动元素,这不是一个选项).
所以我的问题是,如何让父div获得所包含元素的高度.

编辑:没有Javascript解决方案,只有CSS

HTML:

<div class="mask">
    <div id="content-1" class="content-item">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit...
    </div>
    <div id="content-2" class="content-item">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit...
    </div> 
</div>????

CSS:

.mask{
    position:relative;
    width:800px;
    border: 1px solid black;

}
.content-item{
    position: absolute;
    width:300px;
}
#content-1{
    left:10px;
}
#content-2{
   left: 300px;
}

​

简而言之:
基本上,我只是想知道为什么过度使用:隐藏了包含浮动物品的容器.它不应该像这个图像中那样隐藏溢出的元素http://css-tricks.com/wp-content/csstricks-uploads/css-overflow-hidden.png

为什么会这样做而不是http://css-tricks.com/wp-content/csstricks-uploads/overflow-float.png

长版本:
非定位,非浮动,块级元素的作用就像浮动元素不存在一样,因为浮动元素相对于其他块元素不流动.内联元素环绕浮动元素以确认它们的存在.我知道溢出属性如何工作以及应用它的位置,并且清除浮动最好使用clearfix而不是overflow属性(尽管某些情况可能需要使用溢出清除).但是,我仍然不明白为什么它扩展了父元素,特别是当我们使用overflow:hidden时.为什么父元素只是"隐藏"溢出的浮动子元素？毕竟,我们不是隐藏溢出？

大多数clearfix技术都涉及在父容器的最底部添加内容,并且我更喜欢伪元素方法,因为它不会将不需要的元素添加到HTML中.

然而,最近我发现我正在处理一个有一些孩子漂浮但不是全部的容器.假设前两个孩子第一个漂浮在左边,第二个漂浮在右边.我需要一种方法来清除第二个元素之后的浮动,因此下面的内容不会被挤压在它们之间.有没有办法清除中间的浮动元素,但没有添加clearfix元素？

以下是一个例子:

HTML

<div class="container">
    <div class="child">
        first child!
    </div>
    <div class="child">
        second child!
    </div>
    <div class="child">
        third child!
    </div>      
</div>

CSS

.container {
    width: 200px;
}

.child:nth-child(1) {
    float: left;
    background: yellow;
}

.child:nth-child(2) {
    float: right;
    background: red;
}

.child:nth-child(3) {
    background: blue;
    color: white;
}

请看这个jsfiddle,看看我现在有什么.

我一直在使用flexbox进行布局,CSS浮动作为旧浏览器的后备.总的来说这很有效,因为理解的浏览器display: flex会忽略任何弹性项目上的浮动.

但是,我遇到这个问题的一个问题是使用clearfix.Clearfix是一种广泛使用的hack,它使用不可见的:after伪元素使容器正确清除/包含其中的任何浮动元素.但是,问题是这个伪元素被支持flexbox的浏览器视为弹性项目,这可能导致意外的布局问题.例如,如果您有两个弹性项目并使用justify-content: space-between,而不是位于弹性容器的开头和结尾,它们将出现在开头和中间,隐形的clearfix ::after伪元素占据结束位置.

我的问题是:有没有办法在不引起这些问题的情况下使用clearfix和flexbox布局？

现在清除浮动内容的现代方法是什么？

有一种"最近的"现代方法是在父元素上添加".clearfix"来清除包含的浮点数,这样做效果很好.事实上,这是我最喜欢的方法,仍然在我触摸的任何网站上使用它.它使每个浏览器都能正确呈现.

但是,我知道这是一种黑客攻击,我最近搜索了很多前端开发人员都有同样的想法并想要一个更真实的解决方案.我发现的结果并不是很好.有一些解决方案,但它们只适用于IE7 +,有时候在Opera上有些麻烦.

无论如何,我只是想知道这些天清除花车的最佳方法是什么？

我会根据52framework.com提供的内容进行调整.(HTML5,CSS3,JS框架)尽管观看网格教程视频并检查其他演示源代码,但我无法理解为什么框架<div class="clear"></div><!-- clear -->在第12行使用代码.

以下代码的地址是:http://demo.52framework.com/demos/framework/grid.html

<body>
<div class="row">
<header>        
        <div class="logo col_7 col">52framework</div><!-- logo col_7 -->        
            <nav class="col_9 col">
          <ul>
                <li><a href="#navigation">navigation 1</a></li>
                <li><a href="#navigation">navigation 2</a></li>
                <li class="last"><a href="http://www.enavu.com">enavu network</a></li>
              </ul>
            </nav><!-- nav col_9 -->
        <div class="clear"></div><!-- clear -->
    </header>
</div><!-- row -->
...

下面的代码也来自同一个源代码,但是你看到<div class="clear"></div><!-- clear -->这里没有使用代码段,即使这里已经完成了更多的分区.

<!-- this section shows off the grid and how it can be used -->
<section class="row" id="grid">
    <h2>Grid Framework</h2> …