溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

div清除浮動css樣式代碼分享

發布時間:2021-08-07 23:43:59 來源:億速云 閱讀:119 作者:chen 欄目:web開發

這篇文章主要介紹“div清除浮動css樣式代碼分享”,在日常操作中,相信很多人在div清除浮動css樣式代碼分享問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”div清除浮動css樣式代碼分享”的疑惑有所幫助!接下來,請跟著小編一起來學習吧!

1、結尾處加空div標簽 clear:both

代碼如下:


.div1{background:#000080;border:1px solid red;}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
.clear{clear:both}

這種方法,感覺之前大家用的比較多。但是無緣無故多出一個空的div,而且浮動越多就要不斷加div,讓我感覺很憂傷,所以我不太喜歡用。

2、父級div 也一起浮動

代碼如下:


.div1{background:#000080;border:1px solid red;width:98%;margin-bottom:10px;float:left;}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}

這個方法我記得我是在學校的時候,看老外的CSS書時看到的,當時覺得很好用,但是現在覺得最好還是別用了,有時真的會很麻煩。
因為父級的元素一浮動,又會產生其他元素的浮動問題,不信你可以試試。

3、父級div定義 height

這個方法其實我還是蠻常用的,主要用在那些可以確定高度的元素上,感覺使用上很方便。但是那些需要自適應高度的就不適合了。

代碼如下:


.div1{background:#000080;border:1px solid red;height:200px;}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}

4、父級div定義偽類:after 和 zoom

這個方法也是我平時比較喜歡用的,感覺還挺好用的。

可以定義一個通用類選擇器,然后反復使用:

代碼如下:


.clear{zoom:1}
.clear:after{display:block;clear:both;content:"";}

剛用這個的時候,還不知道content屬性是干嘛的,后來查了下是這么解釋的:
content配合before和:after偽類一起使用,用于插入內容。
小小舉個例子,簡單寫一下:

代碼如下:


a:after{content:"aaa";}
<p><a href="#" target="_blank">AAA</a></p>

最后的顯示結果是AAAaaa

代碼如下:


.div1{background:#000080;border:1px solid red;}</p> <p>.left{float:left;width:20%;height:200px;background:#DDD}</p> <p>.right{float:right;width:30%;height:80px;background:#DDD}</p> <p>.clear{zoom:1}</p> <p>.clear:after{display:block;clear:both;content:"";}

到此,關于“div清除浮動css樣式代碼分享”的學習就結束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習,快去試試吧!若想繼續學習更多相關知識,請繼續關注億速云網站,小編會繼續努力為大家帶來更多實用的文章!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女