css 清除屬性 (clear) 用來控制元素與浮動元素的關系,確保非浮動元素不會流到浮動元素下方。用法如下:none:不清除浮動left:清除左側浮動right:清除右側浮動both:清除左右浮動
CSS 中 clear 屬性的作用
clear 屬性用于控制一個元素與浮動元素之間的關系,確保非浮動元素不會流到浮動元素的下方。
用法
<code class="<a style='color:#f60; text-decoration:underline;' href=" https: target="_blank">css">clear: none | left | right | both;</code>
登錄后復制
none:默認值,不清除浮動。
left:清除左側的浮動元素。
right:清除右側的浮動元素。
both:清除左右兩側的浮動元素。
作用
當元素浮動時,它們會被置于文檔流之外,后面的非浮動元素會流到浮動元素的下方。clear 屬性通過設置非浮動元素的 clear 值,使其強制在浮動元素的上方開始。
例如,以下代碼將確保段落元素不會流到浮動圖像的下方:
<code class="css">p { clear: both; }</code>
登錄后復制
示例
假設有以下 HTML 代碼:
<code class="html"><div class="container"> <div class="image float-left"></div> <p>段落</p> </div></code>
登錄后復制
如果未設置 clear 屬性,段落元素將流到圖像元素的下方,導致布局混亂。
通過設置 clear 屬性,可以確保段落元素在圖像元素的上方開始:
<code class="css">.container { width: 500px; } .image { float: left; width: 200px; height: 200px; background: #f00; } p { clear: both; }</code>
登錄后復制
在此示例中,段落元素強制在圖像元素的上方開始,從而使布局清晰明了。