Question

我在网站上关闭了这个问题并关闭了几个问题，但似乎从未有过明确的定义。

似乎通过实验，<div class="list"> <div>new row1</div> <div>new row2</div> <div>new row3</div> <div>new row4</div> . . . </div>完全从浮动布局位置移除了元素，并将元素放回常规文档流中。

另一方面，

float: none;似乎打破了元素的浮动，但不将元素放回到常规文档流中，而是将元素保持在浮动布局位置流中。

这是一个正确的假设，是否可以更彻底地解释这个主题，或者引用比单个实验更可信的来源。

Answer 1

clear ing不会更改元素的float状态 - 它仅定义元素是否允许位于另一个元素旁边或必须包裹在下面。

浮点CSS属性指定一个元素应该从正常流中获取并放置在其容器的左侧或右侧，其中文本和内联元素将环绕它。

https://developer.mozilla.org/en-US/docs/Web/CSS/float

clear CSS属性指定元素是否可以位于其前面的浮动元素旁边，或者必须在它们下面向下移动（清除）。

https://developer.mozilla.org/en-US/docs/Web/CSS/clear

以下是您需要clear元素的示例：
请注意在这种情况下需要清除的footer（非浮动元素）是怎样的。

＆＃13;

section {float:left; width:60%; height:200px; background:rgba(255,0,0,.3);}
aside {float:right; width:40%; height:100px; background:rgba(0,255,0,.3);}
footer {/*clear:both;*/ background:rgba(0,0,255,.3);}

＆＃13;

<section>Main</section>
<aside>Sidebar</aside>
<footer>Footer</footer>

＆＃13;

清算时不够......

所以，你已经成功地浮现了你的元素，并且已经打破了“流动”。但现在你发现自己有一个zero-height/collapsing container problem？为此，您需要clear-fix。以下是问题和解决方案的一个示例：

＆＃13;

section {border:1px solid red; padding:10px 5px; clear:both;}
span {display:block; float:left; width:80px; height:80px; margin:0 5px; background:rgba(100,100,100,.3)}

.clearfix {border-color:green;}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

＆＃13;

<section>
    <span>1</span><span>2</span><span>3</span><span>4</span>
</section>
<section class="clearfix">
    <span>1</span><span>2</span><span>3</span><span>4</span>
</section>

＆＃13;

CSS：清除：左/右/两者; VS Float：无;

1 个答案: