http://blog.csdn.net/qq812858143/article/details/50760025?locationNum=1&fps=1
HTML元素的浮動以及清除浮動，對很多人來說都是感覺非常噁心的，所以今天就研究了下。研究透了，也就那樣了。
如果不理解的話，做頁面佈局的時候，經常會遇到頁面被撐不起來的現象，所以浮動這個知識點還是蠻重要的。
1.原始元素如下,外層div：container，內層：a左浮動，b右浮動
[html] view plain copy
<body>
<div class="container" style="border:1px solid green;">
<div class="a" style="width:100px; height:100px; border:1px solid red; float:left;">這是一個長很長的頁面</div>
<div class="b" style="width:100px;height:200px; border:1px solid blue; float:right;">塊元素</div>
</div>
</body>
效果圖：
分析：a元素左浮動，b元素右浮動，綠色邊框的container元素高度沒有被撐起來，成爲一條橫線，因爲浮動的元素不被看作正常的文檔流，所以高度相對於文檔流的container來說無效。
2.在b元素下添加c元素,c元素樣式clear:left
[html] view plain copy
<body>
<div class="container" style="border:1px solid green;">
<div class="a" style="width:100px; height:100px; border:1px solid red; float:left;">這是一個長很長的頁面</div>
<div class="b" style="width:100px;height:200px; border:1px solid blue; float:right;">塊元素</div>
<div class="c" style="clear:left;"></div>
</div>
</body>
效果圖：
分析：綠色邊框container元素有了左側a元素的高度，因爲clear:left清除了左側a元素的浮動，相當於a元素恢復成文檔流元素，所以其高度對於container有效，撐開了其高度。
3.將c元素樣式改成clear:right
[html] view plain copy
<body>
<div class="container" style="border:1px solid green;">
<div class="a" style="width:100px; height:100px; border:1px solid red; float:left;">這是一個長很長的頁面</div>
<div class="b" style="width:100px;height:200px; border:1px solid blue; float:right;">塊元素</div>
<div class="c" style="clear:right;"></div>
</div>
</body>
效果圖：
分析：c元素的clear:right清除了右側b元素的浮動，b元素就相當於文檔型元素了，所以其高度有效，container被b元素撐開。
4.將c元素改成clear:both
[html] view plain copy
<body>
<div class="container" style="border:1px solid green;">
<div class="a" style="width:100px; height:100px; border:1px solid red; float:left;">這是一個長很長的頁面</div>
<div class="b" style="width:100px;height:200px; border:1px solid blue; float:right;">塊元素</div>
<div class="c" style="clear:both;"></div>
</div>
</body>
效果：
分析：因爲c元素的clear:both，意思是清除左右浮動，所以a,b元素都成了文檔型元素效果，所以其高度都有效，而b元素高，所以contariner被撐到b的高度。
clear清除
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章