尽管像<div>s 这样的元素通常会增长以适应其内容,但使用该float属性可能会给 CSS新手带来惊人的问题:如果浮动元素具有非浮动父元素,则父元素将崩溃.
例如:
<div>
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>此示例中的父div 不会展开以包含其浮动的子项 - 它似乎具有height: 0.
我想在这里创建一个详尽的解决方案列表.如果您了解跨浏览器兼容性问题,请指出它们.
浮动父母.
<div style="float: left;">
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>优点:语义代码.
缺点:您可能并不总是希望父级浮动.即使你这样做,你是否漂浮了父母的父母,等等？你必须浮动每个祖先元素吗？
给父母一个明确的高度.
<div style="height: 300px;">
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>优点:语义代码.
缺点:不灵活 - 如果内容更改或浏览器调整大小,布局将中断.
在父元素中添加"spacer"元素,如下所示:
<div>
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
<div …最近我查看了一些网站的代码,发现每个人<div> 都有一个班级clearfix.
经过快速谷歌搜索,我了解到它有时适用于IE6,但实际上是什么是一个clearfix？
与没有clearfix的布局相比,您能提供一些带有clearfix的布局示例吗？
我有一个div包装两列布局的古老问题.我的侧边栏是浮动的,所以我的容器div无法包装内容和侧边栏.
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
似乎有很多方法可以修复Firefox中的明确错误:
<br clear="all"/>overflow:autooverflow:hidden在我的情况下,唯一似乎正常工作的是<br clear="all"/>解决方案,这有点邋.. overflow:auto给我讨厌的滚动条,overflow:hidden肯定有副作用.此外,IE7显然不应该由于其不正确的行为而遭受这个问题,但在我的情况下,它与Firefox的痛苦相同.
目前我们可以采用哪种方法最强大？
我看过div标签clearfix在孩子divs使用该float属性时使用了一个类.clearfix类如下所示:
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
.clearfix {
display: block;
}
我发现如果我clearfix在使用该bottom-border属性时不使用,边框将显示在孩子上方divs.有人可以解释一下clearfix类的作用吗？另外,为什么有两个display属性？这对我来说似乎很奇怪.我特别好奇这content:'.'意味着什么.
谢谢,G
.clearfix {
*zoom: 1;
&:before,
&:after {
display: table;
content: "";
// Fixes Opera/contenteditable bug:
// http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
line-height: 0;
}
&:after {
clear: both;
}
}
display:block？::before伪类？您知道这个古老的问题:包含浮动元素的容器不会自动扩展其高度以包围其子级.
修复此问题的一种方法是"clearfix",它添加了许多CSS规则以确保容器正确伸展.
但是,只是提供容器overflow: hidden似乎也可以正常工作,并具有相同的浏览器兼容性.
根据本指南,这两种方法兼容当今所有重要的浏览器.
这是否意味着"clearfix"已被弃用？使用它还有什么好处overflow: hidden吗？
这里有一个非常相似的问题:clearfix hack和overflow之间有什么不同:hidden vs overflow:auto？ 但问题并没有真正回答那里.
我道歉,因为这看起来很简单.
以下一个元素在换行符上的方式插入换行符的正确方法是什么？似乎有些东西会自动执行此操作(例如<p>在`内),但我看到下一个元素可以出现在最后一个元素旁边的行为.
HTML:
<ul class="nav nav-tabs span2">
<li><a href="./index.html"><i class="icon-black icon-music"></i></a></li>
<li><a href="./about.html"><i class="icon-black icon-eye-open"></i></a></li>
<li><a href="./team.html"><i class="icon-black icon-user"></i></a></li>
<li><a href="./contact.html"><i class="icon-black icon-envelope"></i></a></li>
</ul>
<BR /> <!-- It seems dumb to need this! Is this really how -->
<BR /> <!-- to get a newline? -->
<BR /> <!-- Well, it's what -->
<BR /> <!-- I'm doing now, I suppose... -->
<BR />
<div class="well span6">
<h3>I wish this appeared on the next line without having to …它是标准的浮动问题.在父容器div中有一堆浮动元素.由于孩子是浮动的,因此父母不会扩展以包括所有孩子.
我知道clearfix解决方案以及将父容器div上的overflow属性设置为"auto"或"hidden".http://www.quirksmode.org/css/clearing.html 对我来说,设置overflow方法看起来好像只是一个属性.我想要了解的是,clearfix方法何时优于此方法,因为我发现它经常使用.
PS我不关心IE6.
我有一个twitter bootstrap的问题,对我来说有点奇怪.我有一个侧边栏固定在左侧和主要区域.
<div>
<div id="sidebar">
<ul>
<li>A</li>
<li>A</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>...</li>
<li>Z</li>
</ul>
</div>
<div id="main">
<div class="clearfix">
<div class="pull-right">
<a>RIGHT</a>
</div>
</div>
<div>MOVED BELOW Z</div>
</div>
#sidebar {
background: red;
float: left;
width: 100px;
}
#main {
background: green;
margin-left: 150px;
overflow: hidden;
}
在主要区域内部,我有一些左拉和拉右的内容,由clearfix清除.
问题是clearfix-div下面的内容被移动到低于侧边栏内容.
我为此做了一个小提琴:http://jsfiddle.net/ZguC7/
我通过将"overflow:collapse"设置为#main解决了这个问题,但是我不理解它,如果有人可以解释导致这个问题的原因,我会非常高兴.
我正在使用twitter bootstrap,我clearfix在bootstrap中遇到类问题.我的HTML是:
<div class="pull-left">This is a text</div>
<hr class="clearfix" />
我期待的是水平线应该出现在显示文本的下一行,但它会在文本的右侧呈现.而如果当我使用style='clear: both;'的hr不是它工作正常.为什么clearfix不这样做clear: both呢？