正確的方式來包含使用HTML/CSS浮動元素？

說我有以下HTML：正確的方式來包含使用HTML/CSS浮動元素？

<head> 
    <style> 
     #container { 
      border: 1px red solid; 
     } 
     .floaty { 
      width: 200px; 
      float: left; 
      border: 1px green solid; 
     } 
    </style> 
</head> 
<body> 
<div id='container'> 
    Text inside the container 
    <div class='floaty'> 
    Floaty block 1<br/> 
    Floaty block 1<br/> 
    Floaty block 1<br/> 
    </div> 
    <div class='floaty'> 
    Floaty block 2<br/> 
    Floaty block 2<br/> 
    Floaty block 2<br/> 
    </div> 
    <div class='floaty'> 
    Floaty block 3<br/> 
    Floaty block 3<br/> 
    Floaty block 3<br/> 
    </div> 
</div> 
</body>

這使得爲： floaty divs

什麼是正確的CSS的方式有容器（紅色邊框盒）完全包圍輕飄綠色接壤盒？

來源

2010-07-22 Roy Tang

更新了它。謝謝！ – 2014-02-17 14:31:48

添加overflow: auto的容器，就像這樣：

#container { 
    border: 1px red solid; 
    overflow: auto; 
}

You can test the effect here，並找到a very good description of how it works here。

來源

2010-07-22 12:08:06

這是否適用於所有瀏覽器？我目前無法訪問Windows機器，因此無法測試IE。 – 2010-07-22 12:10:29

'overflow：hidden'也可以工作 – 2010-07-22 12:11:12

@Roy - 您可能必須在IE中爲元素指定寬度才能正常運行，取決於您必須支持哪些版本。 – 2010-07-22 12:16:25

將overflow: auto加到容器中或應用clearfix。

來源

2010-07-22 12:07:59

正確的方式來包含使用HTML/CSS浮動元素？

回答

相關問題