清除浮動之父級div定義僞類:after和zoom

時間 2020-06-15

標籤清除浮動之父 div 定義 zoom 欄目 CSS 简体版

原文原文鏈接

這是比較經常使用的一種清除浮動的方法，各大網站都在採用：css

<!Doctype html>
<html>
<head></head>
<body>
<style type="text/css"> .div1{background:#333;border:1px solid red;} .div2{background:#888;border:1px solid red;height:100px;margin-top:10px} .left{float:left;width:20%;height:200px;background:#fff} .right{float:right;width:30%;height:80px;background:#fff}
   
   /*清除浮動代碼*/ .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} .clearfloat{zoom:1}
   </style> 
<div class="div1 clearfloat"> 
<div class="left">Left</div> 
<div class="right">Right</div> 
</div>
<div class="div2"> div2 </div>
</body>
</html>

1. 用after僞類清除浮動
2. :after僞類+content內容清除浮動
3. 使用 after 僞類清除浮動
4. CSS 清除浮動僞類
5. 利用僞類元素清除浮動
6. 僞元素清除浮動
7. 浮動和清除浮動
8. 清除浮動float (:after方法)
9. 清除浮動以及:after元素
10. CSS：父子元素浮動分析和清除浮動
更多相關文章...
• ionic 浮動框 - ionic 教程
• 自定義TypeHandler - MyBatis教程
• RxJava操作符（十）自定義操作符
• Docker 清理命令

相關標籤/搜索