當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS 小结笔记之清除浮动

發布時間：2023/12/2 CSS 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS 小结笔记之清除浮动小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

浮動是一個非常好用的屬性，但是有時會出現一些問題，需要進行清除浮動。例如

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.fa {background-color: red;width: 600px;/* height: 600px; */}.son1 {width: 200px;height: 200px;background-color: aqua;float: left;}.son2 {width: 300px;height: 200px;background-color: pink;float: left;}.div2 {width: 700px;height: 100px;background-color: orange;}</style> </head><body><div class="fa">aaa<div class="son1"></div><div class="son2"></div></div><div class="div2"></div> </body></html> View Code

在父盒子沒有給出高度的情況下，子盒子浮動不會將父盒子撐開來。

清除浮動使用clear:left|right|both?一般使用clear：both，具體方法如下：

1、在浮動標簽后邊添加一個額外的clear標簽例如<div style="clear:both"></div>這樣做的方法例如 <body><div class="fa">aaa<div class="son1"></div><div class="son2"></div><div style="clear:both"></div></div><div class="div2"></div> </body> View Code

結果如下，這種方法簡單明了，但是會增加額外的標簽

2、父級添加overflow:hidden|auto|scroll? 在.fa 的css屬性中增加overflow:hidden ，結果也如上圖所示，例如 .fa {background-color: red;width: 600px;overflow: hidden;} 這種方法方便快捷，但是元素內容多時易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素

3、使用after偽元素進行清除浮動

.clearfix:after {content: ".";/* 最好給content制定一個值防止舊版瀏覽器有空隙 */display: block;height: 0;visibility: hidden;clear: both;}.clearfix {*zoom: 1;/* 星號代表是ie6、ie7能識別的特殊符號zoom 是ie6、ie7清除浮動的方法*/}

這樣給父盒子增加一個clearfix? 類即可實現1中的圖片效果。

4、同時使用after和before清除浮動 .clearfix:before,.clearfix:after {content: "";display: table;}.clearfix:after {clear: both;}.clearfix {*zoom: 1;}

用法和方法三一樣，給父元素增加clearfix 類即可

第3、4種方法都是目前常用的方法，不增加多余標簽，但是ie6和ie7不支持after，需要使用zoom：1來清除浮動

更多專業前端知識，請上【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的CSS 小结笔记之清除浮动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。