在CSS中,清除浮動是一項常見的技巧。它可以避免浮動元素帶來的尺寸、位置等方面的問題。以下是一些常見的清除浮動代碼。
.clearfix:after { content: ""; display: table; clear: both; }
這是一種比較流行的清除浮動方式。首先,給需要清除浮動的元素添加一個clearfix類。然后使用偽元素:after給clearfix元素添加一個空內容的塊級元素。接著設置display為table可以讓其具有表格屬性,而clear:both可以清除元素前面的浮動。
.clearfix::before, .clearfix::after { content: ""; display: table; } .clearfix::after { clear: both; }
這是一種另類的清除浮動方式。它與上述方式的區別在于,使用了兩個偽元素:before和:after,:before使clearfix元素變成塊級元素,而:after起到清除浮動的作用。
.clearfix { overflow:hidden; }
這是一種比較簡單的清除浮動方式。設置overflow:hidden可以讓清除浮動的同時,隱藏溢出的內容。但是需要注意,如果清除浮動的元素本身的高度大于父元素,則會產生截斷的情況。
以上就是幾種常見的CSS清除浮動的方式。根據實際情況,選擇合適的清除浮動方式可以避免許多布局上的問題。
上一篇css中漸變背景
下一篇mysql最后一個勾不打