Html 向左浮动，但在屏幕上的某个点停止调整大小？

我有一个div扩展了页面的高度，左侧为float，例如：

#leftvignette {
    width: 200px;
    height: 100%;
    float: left;
}
#sitecontent {
    margin: auto;
    width: 1000px;
}

HTML:

这里的所有其他内容

我希望这个div始终位于我的内容的左侧，直到窗口宽度小于1000px-我不希望

#leftvignette

侵入并覆盖我的内容

有人知道这样做的方法吗？

\leftvignette{
#leftvignette {
    width: 200px;
    height: 100px;
    float: left;
    background:#000;
}
#sitecontent {
    margin: auto;
    width: 1000px;
    background:#f00;
    height:200px;
    float:left;
}
.clear{clear:both;}


<div id="leftvignette"></div>    
<div id="sitecontent">
    all other content here
</div>
<div class="clear">
<!--this will help in clearing float for next comming elements.-->
</div>

宽度：200px；
高度：100px；
浮动：左；
背景：#000；
}
#网站内容{
保证金：自动；
宽度：1000px；
背景：#f00；
高度：200px；
浮动：左；
}
.clear{clear:两者；}
这里的所有其他内容

使用CSS媒体查询和CSS clear属性删除浮动：

@media all and (max-width: 1000px) {
  #leftvignette {
    clear:both;
}
}

---

低于1000px的任何内容都将删除float:left。

我建议您创建一些util类，例如

。清除
，并在需要时将它们作为类应用于html中

CSS:

.clear{
   clear:both;
}

HTML

<div id="leftvignette" class="clear"></div> 

<div id="leftvignette" class="clear"></div> 

@media screen and (max-width:1000px){
     #leftvignette{
        clear:both;
     }
}