Web前端清除浮动的方法

由前端开发者 · 2018年8月20日23:15:51

摘要：前端开发需要用到数据库吗软件开发 web前端华为需要前端开发的吗例： <html> <head> <style type=”text/css”> {margin:0;padding:0;} #main {width:500px;background-color:#000……

前端开发需要用到数据库吗软件开发 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前端开发面试