【筆記】學習CSS佈局10——clear
阿新 • • 發佈：2018-12-01
clear 屬性被用於控制浮動。比較下面兩個例子：
這是沒有clear的例項：
<!DOCTYPE html> <html> <head> <style type="text/css"> .box { float:left; width:200px; height:100px; margin:1em; border:4px solid #6ac5ac; } section { border:4px solid #fdc72f; } </style> </head> <body> <div class="box">我感覺好像我在漂浮！</div> <section>在這個例子中， section 元素實際上是在 div 之後的（譯註：DOM結構上）。然而 div 元素是浮動到左邊的，於是 section 中的文字就圍繞了 div ，並且 section 元素包圍了整個元素。如果我們想讓 section 顯示在浮動元素之後呢？</section> </body> </html>
效果圖如下：
在這個例子中， section 元素實際上是在 div 之後的（譯註：DOM結構上）。然而 div 元素是浮動到左邊的，於是 section 中的文字就圍繞了 div ，並且 section 元素包圍了整個元素。如果我們想讓 section顯示在浮動元素之後呢？
再看下面的例子，這是有clear的例子，控制了浮動。
<!DOCTYPE html> <html> <head> <style type="text/css"> .box { float:left; width:200px; height:100px; margin:1em; background-color:#6ac5ac; } .after_box { clear:left; background-color:#fdc72f; } </style> </head> <body> <div class="box"> 我感覺我好像在漂浮！ </div> <section class="after_box"> 使用 clear 我們就可以將這個段落移動到浮動元素 div 下面。你需要用 left 值才能清除元素的向左浮動。你還可以用 right 或 both 來清除向右浮動或同時清除向左向右浮動。 </section> </body> </html>
效果圖如下：
使用 clear 我們就可以將這個段落移動到浮動元素 div 下面。你需要用 left 值才能清除元素的向左浮動。你還可以用 right 或 both 來清除向右浮動或同時清除向左向右浮動。