這篇文章主要介紹“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樣式代碼分享”的學習就結束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習,快去試試吧!若想繼續學習更多相關知識,請繼續關注億速云網站,小編會繼續努力為大家帶來更多實用的文章!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。