css 中的 clear 屬性控制元素與前面浮動元素的關系:none:不受浮動元素影響;left:清除左側浮動元素;right:清除右側浮動元素;both:清除左右兩側浮動元素。
clear 在 CSS 中的含義
clear 在 CSS 中是一個屬性,用于控制一個元素與它前面的浮動元素的關系。當一個元素浮動時,它會脫離正常文檔流,允許后面的元素在其上方流動。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: 元素清除左右兩邊的浮動元素。
示例
<code class="css">.container { width: 100%; } .float-left { float: left; width: 50%; } .no-clear { clear: none; } .left-clear { clear: left; } .right-clear { clear: right; } .both-clear { clear: both; }</code>
登錄后復制
效果
.no-clear
不會清除前面的浮動元素,.float-left 將會出現在 .no-clear
的上方。
.left-clear
會清除左邊的浮動元素,.float-left 將會出現在 .left-clear
的上方。
.right-clear
會清除右邊的浮動元素,.float-left 將會出現在 .right-clear
的下方。
.both-clear
會清除左右兩邊的浮動元素,.float-left 將會出現在 .both-clear
的下方。
用法
clear 屬性通常用于在浮動布局中控制元素的布局和順序。它可以確保內容不會被浮動元素覆蓋或遮擋。