清浮动常见方法总结

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