css中清除float的方法是,為父元素設定【overflow:auto】。設定之後,內容元素會被修剪,超出元素將不可見。我們也可以透過增加空標籤,或使用【:after】偽元素來清除float。
本文操作環境:windows10系統、css 3、thinkpad t480電腦。
我們先來說下清除浮動的目的,清除浮動並不是清理自身的浮動的效果,而是清理上面接觸到的浮動元素的浮動,使浮動元素後面的元素不接受它們的浮動,按照正常的元素流進行佈局。
下面我們就來為大家介紹下清除浮動的三種方式:
第一種方式:
增加一個空的標籤(div 或 br等都行),透過clear:both語句消除float對後面元素的影響。
<div class="main_left">.main{float:left;}</div> <div class="side_left">.side{float:right;}</div> <!--增加一个空标签--> <div style="clear:both;"></div> <div class="footer">.footer</div>
缺點:需要加上很多無意義的標籤,對後期維護不利。如果是小程序,那沒關係,但如果是大工程,還是要慎用。
第二種方式:使用:after 偽元素
.clearIt { zoom:1; } .clearIt:before; /*加上before可以防止浏览器顶部的空白崩溃(就是上一个div的margin-bottom和下边的margin-top会发生叠加)*/ .clearIt:after { content:"."; display:block; height:0; visibility:hidden; clear:both; } /* display:block 使生成的元素以块级元素显示,占满剩余空间; height:0 避免生成内容破坏原有布局的高度。 visibility:hidden 使生成的内容不可见,并允许可能被生成内容盖住的内容可以进行点击和交互; 通过 content:"."生成内容作为最后一个元素,至于content里面是点还是其他都是可以的,例如oocss里面就有经典的 content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙; zoom:1 触发IE hasLayout。 */
第三種方式:
在父元素設定overflow:auto
<!--为父元素设置overflow--> <div class="wrap" style="overflow:auto;"> <div class="wrap_main_left">.main{float:left;}</div> <div class="wrap_side_left">.side{float:right;}</div> </div> <div class="footer">.footer</div>
當父元素設定了overflow:auto之後,內容元素會被修剪,超出元素不可見。
這種方式的優點是不存在結構和語意化問題,程式碼量極少。但缺點也很嚴重,當內容增加時容易因為不會自動換行而導致內容被隱藏掉,無法顯示需要溢出的元素。
其實只有clear:both是用來消除float的影響。其它的幾種方式都是透過隱藏內容來達到自己的目的。
相關學習影片分享:css影片教學
#以上是css中如何清除float的詳細內容。更多資訊請關注PHP中文網其他相關文章!