欢迎访问本站·  我们将竭尽全力为您服务·  设计与开发、售后服务安全可靠!

项目经理· 服务热线:150-5696-8972 王工     售后热线:182-5605-6183 张工

庐江建站公司哪家好

您所在的位置: 网站首页 > 新闻动态 > 建站知识

详解三种实用CSS清除浮动的方法

发表日期:2012-11-05 10:01:47

以下内容涉及css网页代码,由庐江网络公司-庐江卫来科技科技在此使用引用样式为大家讲解:
 

以下是引用片段:

应用DivCSS网页布局,经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写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>

一、使用空标签清除浮动

  我用了很久的一种方法,空标签可以是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>

二、使用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>

三、使用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>
 

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

如有问题请联系庐江网站建设 卫来科技官网首页右边客服中心为您详细解答:https://www.ljweilai.cn/

上一篇:YY赚钱产业链背后:隐秘龙头控制人气频道下一篇:php字符串截取问题

品牌案例

  • 环巢湖旅游门户网

    运漕镇人民政府是乡镇一级人民政府,下设党政办公室、经济发展办公室和社会事务办公室三大办公室,辖国土资源所、计生服务所、农村经济服务中心、社会事业服务中心四个职能部门。

  • 合肥合锻机床股份有限公司

    三亚最爱婚纱摄影是最受欢迎的海南婚纱摄影公司,是三亚婚纱摄影行业中的领军品牌.为您提供专业的三亚婚纱摄影,海南旅游外景婚纱照以及最满意,最优质的服务.三亚婚纱摄影哪家好—三亚最爱婚纱打造新的视觉神话.真诚欢迎您光临三亚最爱婚纱旗舰店!

  • 安徽省交通科学研究院

    清华大学总裁班:汇集工商管理、资本运作、私募股权等管理培训班课程的高端总裁班,欢迎咨询报名!

  • 北京大学国学与管理研修中心

    北京大学,创立于1898年,初名京师大学堂,是中国中央政府设立的第一所大学,为中国近代正式设大学之始,其成立标志着中国近现代高等教育的开端,由此开创了中国的现代学制。

  • 中国科学技术大学 量子材料与光子技术实验室

    快房网是提供最全面最及时的杭州房地产、楼盘信息在线查询,买房卖房和二手房租售咨询服务的互动式房地产门户网站。查看买房、卖房、楼盘和房地产信息就上快房网

  • 中国科学技术大学 陆亚林教授

    科腾世界(上海)文化传播有限公司(以下简称科腾)主要从事文化交流,整案策划,营销策划,影视制作,媒体推广,平面设计等一系列商业及政府活动。

多一份参考,多一份选择,总有益处

请联系我们,免费获得专属《策划方案》及报价
咨询相关问题或预约面谈,可以通过以下方式与我们联系
24小时业务热线:150-5696-8972 王先生
在线客服
咨询热线-王工
150-5696-8972
扫码 - 微信沟通
7*24小时微信扫码咨询
售后热线-张工
182-5605-6183