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

【css中的浮动与三种清除浮动的方法】的更多相关文章

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浮动（folat），清除浮动（clear）（另加两种清除浮动方式，总共三种清除浮动方式）

css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中浮动值: left:向左浮动 right:向右浮动 html文档流:自窗体自上而下分成一行一行,并在没行中从左到右的顺序排放元素. 通过例子来解释浮动 1.页面上有两个块元素,每个块元素独占一行 2.我们希望他们能并排显示,这是就可以使用float,我们先给红色的div加float:left,发现两个是在一行了,但是他们重叠在了一起. 3.这是…

CSS3中三种清除浮动（float）影响的方式

float是HTML中布局的一大关键,很多难题一旦用上float都能很愉快地解决.但是凡是好用的,也容易出错.比如当子元素都为float时,其父元素会受影响,或者偶尔会发现自己某个div的高度变成了0等等. float的特性 1.文字环绕文字环绕效果是很明显的,这里要注意一个地方:浮动的块虽然脱离的正常的文档流,但是还会占有正常文档流的文本空间,可以看到上面第二种图,p的区域其实是顶到了img的底下的,因为float让img脱离文档流,但是p上的文字却没有顶过去,也就是说p上的一部分文字空间仍…

CSS3中三种清除浮动（float）的方法

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

关于CSS中float的两点心得以及清除浮动的总结

对一个元素运用float后,该元素将脱离正常文档流,这意味着: 1. 运用float后,该元素不再影响父元素的高度,如果一个元素的所有子元素都是float的话,那么该元素的高度是0,这样后面元素渲染的时候就会见缝插针,在该元素留下的一切空白中渲染,这个时候就需要清除浮动.关于清除浮动,首先要明白的是,什么是清除浮动.清除浮动实际上是指,撑开父元素的高度,让后面的元素渲染时,不再见缝插针地跑到它留下的空白中.这有很多现成的解决方法,需要明确的一点是:这些方法有些是作用在浮动元素的父元素上的,有些是…