浮动元素不会增加容器元素的高度,因此,如果不清除它们,容器高度不会增加...
我将以视觉方式向您显示:
更多说明:
<div>
<div style="float: left;"></div>
<div style="width: 15px;"></div> <!-- This will shift
besides the top div. Why? Because of the top div
is floated left, making the
rest of the space blank -->
<div style="clear: both;"></div>
<!-- Now in order to prevent the next div from floating beside the top ones,
we use `clear: both;`. This is like a wall, so now none of the div's
will be floated after this point. The container height will now also include the
height of these floated divs -->
<div></div>
</div>
您也可以添加overflow: hidden;
容器元素,但我建议您改用容器元素clear: both;
。
另外,如果您想自我清除某个元素,则可以使用
.self_clear:after {
content: "";
clear: both;
display: table;
}
CSS Float如何工作?
到底什么是浮点数?它有什么作用?
float
大多数初学者都误解了该属性。好吧,到底是做float
什么的?最初,float
引入了该属性,以使文本围绕浮动left
或的图像流动right
。这是 @Madara Uchicha 的另一种解释。
因此,使用该float
属性并排放置盒子是否错误?答案是否定的。如果使用该float
属性来并排设置框,则没有问题。
浮动元素inline
或block
水平元素将使元素的行为类似于inline-block
元素。
演示版
如果浮动元素left
或right
,则width
除非width
明确定义,否则该元素的仅限于其持有的内容...
你不能有float
一个元素center
。这是初学者经常遇到的最大问题,使用float: center;
,这不是该float
属性的有效值。float
通常用于float
/将内容移到最左边或最右边。只有4有效值float
财产即left
,right
,none
(默认)和inherit
。
当父元素包含浮动子元素时,它会折叠,为了防止这种情况,我们使用clear: both;
属性来清除两侧的浮动元素,这将防止父元素崩溃。有关更多信息,您可以在这里参考我的另一个答案。
(重要)想一想,我们拥有一堆各种元素。当我们使用float: left;
或float: right;
元素在堆栈上方移动一个。因此,普通文档流中的元素将隐藏在浮动元素的后面,因为它在普通浮动元素之上的堆栈级别上。(请不要将此与这z-index
完全不同。)
以一个案例为例来说明CSS浮点的工作原理,假设我们需要一个简单的2列布局,其中包含页眉,页脚和2列,因此这是蓝图。
在上面的例子中,我们将浮动只有红色箱子,要么你可以float
同时向left
,或者你可以float
上left
,另一个right
为好,取决于布局,如果是3列,你可能float
2列left
,其中另一一个right
取决于,尽管在此示例中,我们具有简化的2列布局,所以float
一个left
与另一个相对应right
。
用于创建布局的标记和样式在下面进一步说明...
<div class="main_wrap">
<header>Header</header>
<div class="wrapper clear">
<div class="floated_left">
This<br />
is<br />
just<br />
a<br />
left<br />
floated<br />
column<br />
</div>
<div class="floated_right">
This<br />
is<br />
just<br />
a<br />
right<br />
floated<br />
column<br />
</div>
</div>
<footer>Footer</footer>
</div>
* {
-moz-box-sizing: border-box; /* Just for demo purpose */
-webkkit-box-sizing: border-box; /* Just for demo purpose */
box-sizing: border-box; /* Just for demo purpose */
margin: 0;
padding: 0;
}
.main_wrap {
margin: 20px;
border: 3px solid black;
width: 520px;
}
header, footer {
height: 50px;
border: 3px solid silver;
text-align: center;
line-height: 50px;
}
.wrapper {
border: 3px solid green;
}
.floated_left {
float: left;
width: 200px;
border: 3px solid red;
}
.floated_right {
float: right;
width: 300px;
border: 3px solid red;
}
.clear:after {
clear: both;
content: "";
display: table;
}
让我们逐步进行布局,看看float如何工作。
首先,我们使用的主要的包装元素,你可以认为它是你的口,然后我们使用header
和分配height
的50px
所以没有什么花哨那里。它只是一个普通的非浮动块级元素,100%
除非它是浮动的或我们分配inline-block
给它,否则它将占用水平空间。
第一个有效的值float
是left
如此在我们的例子中,我们使用float: left;
了.floated_left
,因此,我们打算在块浮动到left
我们的容器元素的。
列浮动到左侧
是的,如果您看到的父元素.wrapper
已折叠,则看到的带有绿色边框的那个元素没有展开,但这应该对吗?稍后,现在将回到列left
。
进入第二列,让它float
进入right
另一列浮动在右侧
在这里,我们有一个300px
宽列,我们float
到right
,当它浮动到时,它将位于第一列旁边left
,并且由于它浮动到left
,所以它为创造了一个空槽right
,并且由于上有足够的空间right
,right
浮动元素完美地坐在旁边left
。
尽管如此,父元素仍然折叠,现在让我们修复它。有很多方法可以防止父元素折叠。
- 添加一个空的块级元素并
clear: both;
在包含浮动元素的父元素结束之前使用,现在这是对clear
浮动元素的廉价解决方案,它将为您完成工作,但是,我建议您不要使用它。
<div style="clear: both;"></div>
在.wrapper
div
结尾之前添加,例如
<div class="wrapper clear">
<!-- Floated columns -->
<div style="clear: both;"></div>
</div>
演示版
好吧,这很好地解决了问题,不再有折叠的父级,但是它为DOM添加了不必要的标记,因此有人建议overflow: hidden;
在持有浮动子级元素的父级元素上使用,该子级元素可以按预期工作。
使用overflow: hidden;
上.wrapper
.wrapper {
border: 3px solid green;
overflow: hidden;
}
演示版
这每次都为我们节省了一个元素,clear
float
但是当我用它测试各种情况时,它在使用box-shadow
子元素的一个特定案例中失败了。
演示(无法看到所有四个侧面的阴影,overflow: hidden;
导致此问题)
所以现在怎么办?保存一个元素,不行overflow: hidden;
,进行明确的修复,在CSS中使用以下代码段,就像overflow: hidden;
对父元素一样,class
对父元素进行以下调用以自清除。
.clear:after {
clear: both;
content: "";
display: table;
}
<div class="wrapper clear">
<!-- Floated Elements -->
</div>
演示版
在这里,阴影按预期工作,并且它会自动清除防止崩溃的父元素。
最后,我们clear
在浮动元素之后使用页脚。
演示版
float: none;
无论如何,都是使用when ,因为它是默认值,所以可以用来声明float: none;
?
好吧,这取决于是否要进行响应式设计,当您希望浮动元素以某个分辨率在另一个元素下面进行渲染时,会多次使用此值。因为那里的float: none;
财产起着重要作用。
实际例子中很少float
有有用的例子。
- 我们已经看到的第一个示例是创建一个或多个列布局。
img
在内部使用float p
可以使我们的内容四处流通。
演示(无浮动img
)
演示2(img
浮动到left
)
浮动第二个元素,或者使用'margin'
最后但并非最不重要的一点,我想解释一下这种特殊情况,其中您float
只将元素分配给,left
而您没有float
其他元素,那么会发生什么呢?
假设如果我们float: right;
从中移除.floated_right
class
,则由于未浮动,div
将会从极端渲染left
。
演示版
所以在这种情况下,要么你float
将到left
,以及
要么
您可以使用margin-left
它将等于左浮动列的大小,即200px
width。