CSS清除浮动的方法有哪些呢?经常性地会使用到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”>

CSS清除浮动的方法的更多相关文章

  1. CSS清除浮动float方法总结

    使用浮动造成的BUG: 使用浮动前:(子节点是将父节点撑开了) 代码如下 <div class="box"> <div class="d1"& ...

  2. css清除浮动的方法汇总

    这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录. 引用地址 : http://www.cnblogs.com/ForEvErNoME/p/3383539.html ------------- ...

  3. 8种CSS清除浮动的方法优缺点分析

    为什么清除CSS浮动这么难? 因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让 ...

  4. CSS清除浮动各种方法

    当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象.这个现 ...

  5. 常用的CSS清除浮动的方法优缺点分析(个人学习笔记)

    一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer"> <div class="di ...

  6. css清除浮动主要方法

    1.浮动元素尾部添加空div标签,设置css为clear:both: 缺点:如果页面浮动布局多,则需要添加较多div: 2.父级元素定义伪类:after和zoom:1: .father:after{d ...

  7. css 清除浮动的方法

    /*方法一*/ /*局部清除*/ ;visibility:hidden;display:block;clear:both;} .clr{display:inline-block;} .clr{disp ...

  8. css 清除浮动最佳方法!

    .clear:after{content:'\0020';display:block;height:0;clear:both} .clear{*zoom:1}

  9. css清除浮动大全共8种方法

    原文链接http://www.jb51.net/css/173023.html 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同 ...

随机推荐

  1. Daily Build

    Daily Build 是一件非常有意义的事情,也是敏捷开发中关于 “持续集成” 的一个实践.Daily Build 对于开发来说有如下好处: 保证了每次 check in 的代码可用,不会造成整个工 ...

  2. Thinkphp源码分析系列(四)–Dispatcher类

    下面我们来分析一下Thinkphp中的url解析和路由调度类.此类主要功能是 // +--------------------------------------------------------- ...

  3. SQL Server 2012 安装

    SQL Server 2012 安装过程很漫长, 里面很多界面不一一截取了,我分别在win7 企业版 64位 和 win10专业版SP1 64位 装了SQL Server 2012 ,都没有问题. 1 ...

  4. SharePoint 2013 开发——搜索架构及扩展

    博客地址:http://blog.csdn.net/FoxDave SharePoint 2013高度整合了搜索引擎,在一个场中只有一个搜索服务应用程序(SSA).它集成了FAST,只有一个代码库 ...

  5. 信息安全系统设计基础_exp3

    北京电子科技学院(BESTI) 实     验    报     告 课程:信息安全系统设计基础 班级:1353 姓名:吴子怡.郑伟 学号:20135313.20135322 指导教师: 娄嘉鹏 实验 ...

  6. ntpdate[16603]: the NTP socket is in use

    ubuntu使用ntpdate更新时间的时候提示错误如下 root@lnmp:/etc/squid3# sudo ntpdate cn.pool.ntp.org 5 Jan 07:22:59 ntpd ...

  7. Kinect帮助文档翻译之二 手势

    使用或创建手势 有两种方法可以将手势识别添加到你的unity项目中.第一种:找到KinectManager组件,在例子中它被附在MainCamera上.在组件中有两个列表的属性“Player1 Ges ...

  8. sql查询数据库中所有表的记录条数,以及占用磁盘空间大小。

    SELECT TableName = obj.name, TotalRows = prt.rows, [SpaceUsed(KB)] = SUM(alloc.used_pages)* FROM sys ...

  9. ajax、json一些整理(1)

    1.请求text数据,在success事件中手动解析 前台:                 $.ajax({                     type: "post", ...

  10. [Node.js] Creating JWTs (JSON Web Tokens) in Node

    In this lesson we will look at all of the pieces that combine together to create a JWT (j AWT) or JS ...