找回密码
当前位置：前端开发者 > HTML > 正文

Web前端清除浮动的方法

2018-08-20 23:15:51 分类：HTML 阅读(148) 评论(0)

前端开发需要用到数据库吗 软件开发 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
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论