为什么明确：权利不按预期工作 [英] Why clear: right doesn't work as intended

问题描述

我总是对 clear：left ， clear：right 和 clear ：两者。我知道 clear：两个意味着它不允许在它自己的两边浮动元素。

I'm always confused by clear: left, clear: right and clear: both in CSS. I know clear: both means it doesn't allow floating elements on both sides of itself.

测试此处。我认为布局将如下所示，因为 B 使用 clear：both 。但它不。有人能告诉我为什么吗？

I did some testing here. I thought the layout would appear like below, because B uses clear: both. But it doesn't. Could someone tell me why?

A

B

CD

A
B
CD

已更新
（发布代码）

Updated (Post the code)

<div class="container">
    <div class="A">a</div>
    <div class="B">b</div>
    <div class="C">c</div>
    <div class="D">d</div>
    <div class="CB"></div>
</div>

.container{
    width:100%;
    border:1px solid red;    
}
.B{
    float:left;
    clear:both;
    width:10%;
    height:30px;
    border:1px solid blue;
}
.A,.C,.D{
    float:left;
    width:10%;
    height:30px;
    border:1px solid blue;
}
.CB{
    clear:both;
}

推荐答案

清除只会按照文档顺序清除 之前的浮动。它不会清除 之后的浮动。 left 和 right 值分别表示元素前的左浮点和右浮点的清除。它们并不意味着在元素之前和之后清除浮动。

clear on an element only clears the floats before it in document order. It doesn't clear floats after it. The left and right values mean clearance of left floats and right floats preceding an element respectively. They don't mean clearing floats before and after the element.

由于C被浮动，但没有应用任何间隙，它浮在B旁边。 B不会尝试清除C，因为C在文档结构中出现。

Since C is being floated, but doesn't have any clearance being applied, it floats next to B. B does not try to clear C because C comes after it in the document structure.

此外， clear：right 在您的测试用例中没有任何效果，因为您的元素都没有浮动到右边。

Furthermore, clear: right doesn't have any effect in your test case because none of your elements are being floated to the right anyway.

这篇关于为什么明确：权利不按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！