CSS清除浮動的方法有很多,其中最常用的就是CFIX。CFIX是一種在HTML元素上應用跨瀏覽器清除浮動的技巧。
.cfix::after { content: " "; display: block; clear: both; }
上面的代碼就是使用CFIX清除浮動的代碼。首先,在CSS中使用“::after”偽元素,然后將內容設置為空字符串。這樣就可以不用在HTML中添加額外的標簽來清除浮動了。
需要注意的是,CFIX只能用于浮動元素的父元素,而不能用于浮動元素本身。因此,在需要清除浮動的父元素上添加.cfic類,再使用上述代碼即可實現清除浮動。
.parent { overflow: hidden; zoom: 1; } .child { float: left; } .child-last { margin-right: 0; } .cfix::after { content: " "; display: block; clear: both; }
上面的代碼中,.parent類是需要清除浮動的元素的父元素,.child類是浮動的子元素,.child-last類是最后一個子元素,.cfix是用于清除浮動的類。
使用CFIX能夠簡化清除浮動的代碼,并在不添加多余的HTML標簽時完美解決浮動兼容性問題,是一種非常實用的CSS技巧。
上一篇css button扁平
下一篇css canvas畫線