为什么我的清晰样式不能阻止兄弟元素浮动?

时间:2018-07-25 00:26:57

标签: css css-float

我有一个非常简单的HTML / CSS代码段:

##### Pipeline Data: `linear-stage-flag` #####
## STAGE_A UUID: nil.....-....-....-....-............ 
{number:1}
## STAGE_B UUID: 904156A2-BC1A-42B1-AC89-0C4A598EA4BB 
{number:2}
 … EXIT/SKIP `linear-try-catch` SEQUENCE AT STAGE B.
## STAGE_C SKIPPED `linear-stage-flag` SEQUENCE AT STAGE C
## STAGE_D after exiting STAGE_B and skipping STAGE_C
##########################

两个div都向左浮动,但Foo div明确了:两个。那应该防止Bar div漂浮在它旁边...但是事实并非如此。如果将该HTML放入浏览器,则会看到两个div相邻。

我对清除一无所知?

1 个答案:

答案 0 :(得分:1)

您不想在 Foo 之后运行清除,而是要在 Bar

开始之前运行它
<div style="float: left; width: 180px;">Foo</div>

<div style="clear: both; float: left; width: 180px;">Bar</div>

clear CSS属性指定元素可以在其之前的浮动元素旁边还是必须在其下方向下移动(清除)。 clear属性适用于浮动元素和非浮动元素