当元素有浮动属性时,会对其父元素或后面的元素产生影响,
会出现一个布局错乱的现象,可以通过清除浮动的方法来解决浮动的影响。

浮动的清理(clear):

值:
none:默认值。允许两边都可以有浮动对象;
left:不允许左边有浮动对象;
right:不允许右边有浮动对象;
both:左右两侧不允许有浮动对象。

清除浮动的方法:
1.额外标签法
这种方法应该是最简单的一种了,w3c建议在容器的末尾增加一个“clear:both"的元素
强迫容器适应它的高度以便装下所有的float元素。
<div id="main">
   <div id="left"></div>
   <div id="right"></div>
   <div class="clear"></div>
</div>
<div id="footer"></div>

.clear{clear:both;}

2.父元素添加overflow:hidden;
注:如果子元素使用了定位布局,就会很难实现。

3.利用伪对象after方法
定义一个类,使用伪对象after,控制浮动元素的影响。
网上最流行的清除浮动代码:
.clearFix:after{
 clear:both;
 display:block;
 visibility:hidden;
 height:0;
 line-height:0;
 content:'';

}
.clearFix{zoom:1;} /*解决ie6/7兼容问题*/

css溢出的使用
设置对象的内容超过其指定高度及宽度时,如何管理内容。
overflow:visible【默认值,不剪切内容也不添加滚动条】
auto【在必需时,对象内容才会被剪切或添加滚动条】
hidden【不显示超过对象尺寸的内容】
scroll【总是显示滚动条】

zoom属性:只有ie内核的浏览器支持,缩放比例。
设置或检索对象的缩放比例。
语法:normal【默认值,使用对象的实际尺寸】;number【百分数|无符号浮点实数。浮点实数
为1.0或百分数为100%时相当于此属性的normal值
zoom:1解决ie6高度自适应问题。

div+css之清除浮动的更多相关文章

  1. 【css】清除浮动的几种方式

    [css]清除浮动的几种方式   因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid bla ...

  2. HTML&CSS基础-清除浮动

    HTML&CSS基础-清除浮动 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查看浮动效果 1>.HTML源代码 <!DOCTYPE html> &l ...

  3. CSS中清除浮动的两种方式

    在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...

  4. CSS clear清除浮动

    1.CSS中的clear有四个参数: none:允许两边都可以浮动. left:不允许左边有浮动. right:不允许右边有浮动. both(默认):不允许有浮动. 2.一开始在CSS中clear浮动 ...

  5. 关于CSS中清除浮动的方法

    在使用CSS样式时会经常使用到浮动(float),这时如果没有清除浮动就会造成很多怪异的现象,因此对父级元素清除浮动是必须要做的,这样也是书写CSS的一个良好习惯. 目前常用的方法大致有三种. (1) ...

  6. DIV+CSS区块框浮动设计

    在页面布局的时候,能够用绝对定位来实现,可是因为调整某个区块框时其它区块的位置不会对应的改变,所以这并非布局的首选方式.可是使用浮动的区块框能够向左或向右移动,直到它的外边缘碰到包括它区块的边框或还有 ...

  7. CSS中清除浮动的作用以及如何清除浮动

    1.什么是浮动,浮动的作用 “浮动”从字面上来理解就是“悬浮移动.非固定”的意思.块级元素(div.table.span…)是以垂直方向排列,而在前端界面中往往要使用水平布局块级元素使界面更美观.这就 ...

  8. CSS float清除浮动

    解决高度塌陷的问题 – 清除浮动 CSS中有个讨论较多的话题就是如何清除浮动,清除浮动其实就一个目的,就是解决高度塌陷的问题.为什么会高度塌陷?什么时候会高度塌陷?塌陷原因是:元素含有浮动属性 – 破 ...

  9. 【css】清除浮动(clearfix 和 clear)的用法

    本文主要是讲解如何在 html 中使用 clearfix 和 clear,针对那些刚开始了解 css 的童鞋.关于 clearfix 和 clear 的样式在这里我就不写了,具体样式点击此处. 下面就 ...

随机推荐

  1. Java获得文件的创建时间(精确到秒)

    jni C/C++ 头文件:MyFileTime.h C/C++ code /* DO NOT EDIT THIS FILE - it is machine generated */#include ...

  2. Post和get乱码

    post 在web.xml中添加 <filter> <filter-name>CharacterEncodingFilter</filter-name> <f ...

  3. c 函数及指针学习 9

    指针的高级应用 处理命令行参数 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 #include <stdio.h>   int main(int ar ...

  4. Java基础了解

    今天刚开始学习Java,除了老师讲的之外,又进一步上网去了解了下Java的相关知识: Java语言的主要特点: 1. 跨平台性 所谓的跨平台性,是指软件可以不受计算机硬件和操作系统的约束而在任意计算机 ...

  5. Lua快速入门

    -- 两个横线开始单行的注释 --[[ 加上两个[和]表示 多行的注释. --]] ---------------------------------------------------- -- 1. ...

  6. div+css关于overflow 动态滚动效果

    http://www.ablanxue.com/prone_2613_1.html 关于overflow:hidden不起作用的说明

  7. 二十四种设计模式:责任链模式(Chain of Responsibility Pattern)

    责任链模式(Chain of Responsibility Pattern) 介绍为解除请求的发送者和接收者之间耦合,而使多个对象都有机会处理这个请求.将这些对象连成一条链,并沿着这条链传递该请求,直 ...

  8. 解决tomcat一闪而过问题

    环境:      jdk 1.8.0.91           windows2003           tomcat8.0 故障现象:启动tomcat 时, 一闪而过 排障步骤: a) 首先是要调 ...

  9. ASP.NET 3.5 中实现发送email电子邮件

    来源:红黑联盟 方法1:cs代码 using System.Net.Mail; using System.Net; string mailServerName = "smtp.qq.com& ...

  10. expression encoder 4 安装 出现“已经安排重启您的计算机

    问题: expression encoder 4  安装 出现“已经安排重启您的计算机 解决的办法,注册表数据的修改 开始 运行 regedit HKEY_LOCAL_MACHINE\SYSTEM\C ...