三种清除浮动

zoom详解:http://blog.csdn.net/u014516981/article/details/51824607
原文:http://www.cnblogs.com/zhongjiang/p/6440355.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
		.bgg{
			padding: 10px;
			background: yellow;
			overflow: hidden;
		}
		.f{
			width: 100px;
			height: 100px;
			background: red;
			float: left;
		}
		/*.clear{
			clear: both;
		}*/
		/*.bgg:after{
			content: ‘‘;
			display: block;
			clear: both;
		}*/
		</style>
	</head>
	<body>
		<div class="bgg">
			<div class="f">1</div>
			<div class="f">2</div>
			<div class="f">3</div>
			<!--<div class="clear"></div>		-->
		</div>
	</body>
</html>

  

时间: 2024-11-05 19:39:15

三种清除浮动的相关文章

css中的浮动与三种清除浮动的方法

说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top,那么两个margin会发生合并现象,合并以后的值较大的那个. 对于这种现象一般不用处理. 2,margin塌陷现象: 如果一个大盒子中包含一个小盒子给小盒子设置margin-top大盒子会一起向下平移. 解决方案: 1.0给大盒子加一个边框border属性. 2.0给大盒子设置一个overflow

CSS3中三种清除浮动(float)的方法

方法一:添加新的元素 .应用 clear:both .clear{ clear:both; height: 0; height: 0; overflow:hidden; } 方法二:父级div定义 overflow: auto .over-flow{ overflow: auto; zoom: 1; //处理兼容性问题 } 方法三: 伪类  :after 方法  outer是父div的样式 .outer {zoom:1;} /*==for IE6/7 Maxthon2==*/ .outer :a

css 三种清除浮动(float)的方法

方法一:添加新的元素 .应用 clear:both .clear{ clear:both; height: 0; height: 0; overflow:hidden; } 方法二:父级div定义 overflow: auto .over-flow{ overflow: auto; zoom: 1; //处理兼容性问题 } 方法三: 伪类  :after 方法  outer是父div的样式 .outer {zoom:1;} /*==for IE6/7 Maxthon2==*/ .outer :a

三种清理浮动的方式

在页面布局时,我们常常会遇到这样一个问题:对子元素采用浮动之后两者会脱离文档流,导致父元素因为没有内容而收缩,隐藏掉我们设置的背景和其他相关样式.这个时候,我们为了清除浮动的影响,一般有以下三种方法: 方法一:添加一个进行清理的元素(例如一个段落标签或换行标签),r然后用clear属性进行清理. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

8种清除浮动的方法

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:#

css 三(清除浮动专题)

1.  三个关于浮动的概念  不浮动float:none; 清除周围的浮动元素   float:both   这是清除浮动的本意 清除子元素浮动对父元素的影响  clearfix    很多人都理解成这个叫清除浮动.. 2. 什么是清除浮动 清除浮动不是把当前标签的浮动给清除了,如果这样,还加浮动做什么 其实清除浮动指的是清楚当前元素旁边的浮动元素,但是当前元素又不能影响别人,打不赢就跑,所以自己就跑到下面去了. 3. 为什么要清楚浮动 在布局的时候我们经常希望某些内容能够水平排布,水平排布后,

转载-常用的清除浮动的方法有以下三种:

常用的清除浮动的方法有以下三种: 此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景. <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:

清除浮动方法解析

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

CSS清除浮动常用方法小结 CSS clear both {overflow:auto;zoom:1;}

常用的清除浮动的方法有以下三种: 此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景 <!DOCTYPE html><html><head> <meta charset="utf-8"/> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } body { font: 36px bold; c