如果讓浮動div後面的元素換行顯示

螞蟻小編發表於2017-03-16

如果一個div浮動起來，那麼它後面的元素會佔用這個div原來的位置，會被div所覆蓋或者後面跟隨，那麼如何讓浮動div後面的元素換行顯示呢，下面就通過程式碼例項做一下介紹，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#antzone{
  width:300px;
  height:100px;
  background:#CCC;
  float:left;
}
.clear{
  font-size:0px;
  clear:both;
}
</style>
</head>
<body>
<div id="antzone"></div>
<div class="clear"></div>
<input type="button" value="螞蟻部落"/>
</body>
</html>

上面的程式碼實現了我們的要求，原理非常的簡單，無非就是元素浮動以後要清除浮動。

清除浮動可以參閱css清除浮動的方式彙總一章節。

相關文章