青岛网站建设
网站首页 联系我们

资讯中心

联系方式
  • 地址:青岛市李沧区金水路772号
  • 电话:0532-87606070
  • 手机:13969865210
  • 邮箱:web@toorain.net

网站开发知识
青岛网站建设:三种实用CSS清除浮动的方法详解
时间:2013-12-23 18:13:16  来源:青岛网站建设  点击:1535

    青岛网站建设时经常会用到css网页布局,,经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一。以下有三种实用CSS清除浮动的方法下面青岛网络公司将进行分析。以下内容是css网页代码,首先让青岛网站建设公司小编带来的未清除浮动源代码,他的问题是运行代码无法查看到父级元素浅黄色背景。

<style type=”text/css”>
<!–
    *{margin:0;padding:0;}
    body{font:36px bold; color:#F00; text-align:center;}
    #layout{background:#FF9;}
    #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
    #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–>
</style>
<div id=”layout”>
    <div id=”left”>Left</div>
    <div id=”right”>Right</div>
</div>

以下是三种实用CSS清除浮动的方法详解:

一、使用空标签清除浮动

  青岛网站建设公司小编用了很久的一种方法,空标签可以是div标签,也可以是P标签。青岛网站建设公司小编习惯用<div>,够简短,也有很多人用<hr>,只是需要另外为其清除边框,但理论上可以是任何标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清楚浮动,并为其定义CSS代码:clear:both。此方法的弊端在于增加了无意义的结构元素。
<style type=”text/css”>
<!–
    *{margin:0;padding:0;}
    body{font:36px bold; color:#F00; text-align:center;}
    #layout{background:#FF9;}
    #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
    #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
    .clr{clear:both;}
–>
</style>
<div id=”layout”>
    <div id=”left”>Left</div>
    <div id=”right”>Right</div>
    <div class=”clr”></div>
</div>

二、使用after伪对象清楚浮动

  该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0,否则该元素会比实际高出若干像素;二、content属性是必须的,但其值可以为空,蓝色理想讨论该方法的时候content属性的值设为”.”,但青岛网站建设公司小编发现为空亦是可以的。

<style type=”text/css”>
<!–
    *{margin:0;padding:0;}
    body{font:36px bold; color:#F00; text-align:center;}
    #layout{background:#FF9;}
    #layout:after{display:block;clear:both;content:”";visibility:hidden;height:0;}
    #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
    #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–>
</style>
<div id=”layout”>
    <div id=”left”>Left</div>
    <div id=”right”>Right</div>
</div>

 

三、使用overflow属性

  此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性:overflow:auto,即可!”zoom:1″用于兼容IE6。青岛网站建设公司小编我比较倾向于这种方法。

<style type=”text/css”>
<!–
    *{margin:0;padding:0;}
    body{font:36px bold; color:#F00; text-align:center;}
    #layout{background:#FF9;overflow:auto;zoom:1;}
    #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
    #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–>
</style>
<div id=”layout”>
    <div id=”left”>Left</div>
    <div id=”right”>Right</div>
</div>

此三种方法各有利弊,使用时应择优选择,比较之下第三种方法更为可取。
 

青岛图韵网络提供青岛网站建设、青岛网站制作、青岛网站设计等专业化互联网服务,青岛网站改版、网站策划、网站推广、域名注册、空间租用、企业邮局、电子商务系统等互联网信息服务。欢迎各界光临洽谈!

公司网址:
青岛网站建设:http://www.toorain.net/   青岛网站建设公司
青岛企业网站制作:http://www.city86.com/  青岛网站制作公司

联系方式:
电  话:0532-87606070
联 系 人:杨小姐
QQ:704231808
E-MAIL:yangyang@toorain.net
公司网址:
http://www.toorain.net/(官方网站)
http://www.city86.com/(成品网站)
公司地址:青岛市李沧区九水东路193号