Web前端清除浮动的方法

前端开发需要用到数据库吗 软件开发 web前端 华为需要前端开发的吗

例:
<html>
<head>
<style type=”text/css”>
{margin:0;padding:0;}
#main {width:500px;background-color:#000;color:#FFF;}
.left {float:left;width:200px;height:200px;background-color:#900;}
.right {float:left;width:200px;height:300px;background-color:#009;}
</style>
</head>
<body>
<div id=”main”>
<div class=”left”>left<div class=”right”>right

</body>
</html>

浏览器中浏览,发现定义的#main {background-color:#000;}不起作用,是因为left/right浮动了
清除浮动方法:
第一种,用.clearfix,即after伪对象清楚浮动
(这法子是一同事教的、而且几乎不存在兼容性问题)

.clearfix:after {content:”.”;  display:block;clear:both;visibility:hidden;line-height:0;height:0;}
.clearfix {display:block;}

/ For Safari /

html[xmlns] .clearfix {display:block;}
/ For IE6 /
html .clearfix {height:1%;}
/ For IE7 /
*+html .clearfix {height:1%;}
注:对于.clearfix,一位仁兄(ruyingfei )指教了另一精辟:.clearfix { zoom:1;} (可参阅外文:http://msdn.microsoft.com/en-us/library/bb250481(VS.85).aspx

改好后例子如下:
<html><br> <head><br=””> <style type=”text/css”>
{margin:0;padding:0;}
main {width:500px;background-color:#000;color:#FFF;}
.left {float:left;width:200px;height:200px;background-color:#900;}
.right {float:left;width:200px;height:300px;background-color:#009;}</br>>
.clearfix:after {content:”.”;  display:block;clear:both;visibility:hidden;line-height:0;height:0;}

.clearfix {display:block;}

/ For Safari /

html[xmlns] .clearfix {display:block;}
/ For IE6 /
html .clearfix {height:1%;}
/ For IE7 /
+html .clearfix {height:1%;}

</style>
</head>
<body>
<div id=”main” class=”
clearfix“>
<div class=”left”>left

<div class=”right”>right
</body>
</html>
小结:1.优点:兼容性强,使用方便(在css文件里加个.clearfix,在写html时可以随时调用)
…有待更新…
2.缺点:html中需要添加多余的class,css文件量大
…有待更新…
第二种,用clear,即空标签清除浮动
.clear {clear:both;}
修改后例子:
<html>
<head>
<style type=”text/css”>
* {margin:0;padding:0;}
#main {width:500px;background-color:#000;color:#FFF;}
.left {float:left;width:200px;height:200px;background-color:#900;}
.right {float:left;width:200px;height:300px;background-color:#009;}
.clear {clear:both;height:0;font-size:0;overflow:hidden;}
</style>
</head>
<body>
<div id=”main”>
<div class=”left”>left<div class=”right”>right

    <div class=”clear“>

</body>
</html>
注:
<div class=”clear“> 中的div也可用p/hr..
小结:1.优点:简单,通俗…有待更新…
      2.缺点:增加了无意义的结构元素<div class=”clear“>…有待更新…
第三种,用overflow,同时加个“zoom:1;”用于兼容IE6
#main {overflow:auto;zoom:1;}

修改后的例子:
<html>
<head>
<style type=”text/css”>
{margin:0;padding:0;}
main {width:500px;background-color:#000;color:#FFF;  overflow:auto;zoom:1;}
.left {float:left;width:200px;height:200px;background-color:#900;}
.right {float:left;width:200px;height:300px;background-color:#009;}
</style>
</head>
<body>
<div id=”main”>
<div class=”left”>left
 <div class=”right”>right

</body>
</html>
小结:1.优点:简单,无需修改html代码,兼容性强:FF3.6,chrome5.0, IE7, IE8, Safari, Opera
…有待更新…
使用access 作为sql前端开发工具 wed前端开发视频 oppo前端开发面试

» 本文来自:前端开发者 » 《Web前端清除浮动的方法》
» 本文链接地址:https://www.rokub.com/5335.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!