...
利用偽元素:after清除浮動 讓頁面呈現多列布局時經常會使用 float:left right ,可是浮動布局會導致父元素的高度為 未設置高度的情況下 ,不會根據子元素的高度而變化,另外,后面不需要浮動想在下一行顯示的標簽出現在浮動元素的后面。 所以我們在使用浮動進行布局的時候會需要一個塊級元素 行內元素無效 來設置 clear 屬性,如果浮動元素下方本來就有元素,那我們可以直接對該元素設置 c ...
2018-10-26 22:00 0 1006 推薦指數:
...
今天偶然看到一個關於使用偽元素:before和:after清除浮動的問答,覺得很不錯,特此記錄一下。 原文出處:https://segmentfault.com/q/1010000000530778 先給出一個demo 由於父容器內有了浮動元素 div 的緣故,導致父容器 ...
.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; } .clearfix { *zoom:1; } 1) display:block 使生成的元素以塊級元素顯示,占滿剩余 ...
原理: Html每一個標簽前后都會存在前后節點::before、::after, 前后節點設置一個塊狀空元素來清空容器的浮動效果; 實現: <div class='clearfix'></div> //空 ...
/css"> /* 聲明清除浮動的樣式 */ .clearfix:after { content: " ...
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>雙偽元素清除浮動</title> <style type="text/css ...
讓頁面呈現多列布局時經常會使用 float:left/right ,可是浮動布局會導致父元素的高度為0(未設置高度的情況下),不會根據子元素的高度而變化,另外,后面不需要浮動想在下一行顯示的標簽出現在浮動元素的后面。 所以我們在使用浮動進行布局的時候會需要一個塊級元素(行內 ...
使用方法: 優點: 代碼更簡潔 缺點: 由於IE6-7不支持:after,使用 zoom:1觸發 hasLayout。 代表網站: 小米、騰訊等 ...