清浮動常見方法總結

2024-04-27 15:15:44

字體：大中小

來源：轉載

供稿：網友

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>清浮動</title> <style type="text/CSS"> .father{border:1px solid red;margin: 90px auto;overflow: hidden;zoom:1;} .child{width: 200px;height:300px;background: blue;float: left;} /* .clear:after{content: "";display: block;clear: both;} ..clear{zoom:1;} */ /* 清浮動方法總結; 1.在浮動元素下面加上<div class="clear"></div> .clear{clear:both;} 2. 在浮動元素下加<br clear="all" /> 3.給浮動元素父級加上：<div class="father clear" > .clear:after{content:"";display:block;clear:both;} .clear{zoom:1;} 注意事項：在IE6，IE7下不支持after偽類，所以要配合zoom屬性來清浮動，解決兼容性問題擴展：在IE6,IE7下父級有寬度就不用清浮動 haslayout（默認狀態下是false）根據元素內容大小或者父級的大小來重新計算元素的寬高，使用以下樣式會被激活： width:(任何值除了auto); height:(任何值除了auto); display:inline-block; float:left/right; zoom:(除normal之外任何值); 4.給浮動元素父級加上overflow：hidden/auto zoom:1; 注意事項;在IE6中overflow沒有包住浮動元素的作用，即沒有提升層級的作用，所以要配合zoom一起使用 */ </style></head><body> <div class="father clear" > <div class="child"></div> </div></body></html>

上一篇：Windows系統下將ionic項目打包成apk文件的方法

下一篇：CSS Reset