CSS常用清除浮动方法总结

1.对父元素使用overflow:hidden;zoom:1，或者是overflow:auto;zoom:1。

兼容性问题：该处使用zoom:1是为了兼容ie6，但是实际上，用height:1%;代替zoom:1;更好，因为它可以通过W3C。

该方法缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

2.在浮动元素后面添加新的元素，再使用clear:both。缺点：无意义的空标签，不利于语义化。

3.给浮动元素的父元素使用:after伪元素。如下：

.outer{zoom:1;}

.outer:after{

clear:both;

display:block;

content:".";

width:0;

height:0;

visibility:hidden;

}

其中content: ‘.‘; display:block;对于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以为空。visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清楚浮动。

同时，由于IE6-7不支持:after，使用 zoom:1 触发 hasLayout。

关于zoom:1

zoom:1;属性是IE浏览器的专有属性，Firefox等其它浏览器不支持。它可以设置或检索对象的缩放比例。除此之外，它还有其他一些小作用，比如触发ie的hasLayout属性，清除浮动、清除margin的重叠等。
但很遗憾的是，它通不过W3C验证．

时间： 2024-08-10 21:22:36

CSS常用清除浮动方法总结的相关文章

DIV+CSS清除浮动方法

一.为什么要清除浮动? 1>父元素在未定义高的情况下,由于子元素全部浮动脱离文本流,而造成父元素高的塌陷(正常情况下,父元素的高是由未浮动的子元素撑起来) 2>因为部分子元素的而浮动,脱离文本流而造成其他元素的布局错乱. 二.常见的几种清除浮动方法 1>给没有浮动的子元素的CSS添加 clear: both;或新增加一个空的子元素,并且给其的CSS添加 clear: both;这样可以利用清除左右浮动的子元素重新撑起父元素的高,从而达到清除浮动的效果.(关键字:未浮动子元素添加clear

css中清除浮动的方法总结

1.父级div定义height <style type="text/css"> .div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;} .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} .left{float:left;width:20%;height:200px;background:#DD

CSS清除浮动方法集合

CSS清除浮动方法集合 一.浮动产生原因   -   TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 浮动产生样式效果截图 本来两个黑色对象盒子是在红色盒子内,因为对两个黑色盒子使用了float浮动,所以两个黑色盒子产生了浮动,导致红色盒子不能撑开,这样浮动就产生了. 简单地说,浮动是因为使用了float:left或float:right或两者都是有了而产生的浮动. 二.浮动产生负作用   -   

清除浮动方法解析

清除浮动方法解析 清除浮动带来的额外影响 如果对于浮动不熟悉的同学,可以看看介绍float的文章.传送门:CSS float 我们知道,在一个父元素内如果遇到某个浮动元素,此时父元素的高度会发生塌陷.针对父元素高度塌陷的问题,现在已经有了很多的解决方案.针对每一个方案,我们来进行深度的剖析. 添加空块级元素 这种方法比较容易,但是要注意的是这个空元素必须是一个块级元素,不能是行内元素或者是行内块元素.缺点就是多了一些没有意义的标签.代码如下. //HTML <div class="cont

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

[css]清除浮动的几种方式 因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: 1 .news { 2 background-color:gray; 3 border:1px solid black; 4 } 5 .news img { 6 float:left; 7 } 8 .news p { 9 float:right; 10 } 11 <divclass="news"> 12 <imgsrc="/img/news-pic.jgp"

CSS——如何清除浮动

众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除浮动,那么有浮动元素的父元素容器将元素将无法自动撑开.换句简单好理解的话来说,假如你在写CODE时,其中div.A(这个就是说页面中有一个div,并且把其命名为class="A")中包含了两个或多个子元素div.B,div.C,div.D(这里我以三个为例),并且此时div.B和div.C进行浮动,而div.D不进行任何浮动,此时你可以看到父元素div.A高度仅靠div.D来撑开其高度,如果您将di

CSS清除浮动方法

HTML结构 1 <div class="wrap"> 2 <div class="div1">1</div> 3 <div class="div2">2</div> 4 <div class="div3">3</div> 5 </div> CSS样式 1 .wrap{margin:10px;padding20px;border:5

css清除浮动方法小结

清除浮动其实主要解决的就是高度塌陷问题,具体在此不再赘述~~~那些年我们一起清除过的浮动(大佬博客,写的挺不错) 方法小结:1. 1)添加额外标签 这是在学校老师就告诉我们的 一种方法,通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>,其他标签br等亦可. <div class="main left">.main{float:left;}</div> <div class=&quo

推荐使用的CSS清除浮动方法

父级div定义 伪类:after原理:IE8以上和非IE浏览器才支持:after,zoom(IE转有属性)可解决ie6,ie7浮动问题 <style type="text/css"> .div1{background:#000080;border:1px solid red;} .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} .left{float:left;width: