【如何清除浮动(float)所带来的影响】的更多相关文章

如何清除浮动(float)所带来的影响

清除浮动(float) 1.定义和用法 在w3c中给了浮动这样的定义. "float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素". 如果浮动非替换元素,则要指定一个明确的宽度:否则,它们会尽可能地窄. 注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止. 通俗的来讲,浮动就是让默认标准文档流下的元素漂…

【转】css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？

摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3&…

css清除浮动float的几种方法

摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 这里我没有给最外层的DIV.outer 设置高度,但是我们知道如果它里面的元素不浮动的话,那么这个外层的高是会自动被撑开的.但是当内层元素浮动后,就出现了以下影响: (1):背景不能显示 (2):边框不能撑开 (3):margin 设置值不能正确显示     二.清楚css浮动: 方法一:添加新的元素 .应用 clear:both: <body>…

css清除浮动float

css清除浮动float 1.分析HTML代码 <div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </div>  分析css代码样式 .outer{border: 1px solid #c…

更优雅的清除浮动float方法

上篇文章是利用 :after 方法清除浮动float(作用于浮动元素的父元素上). ; } //为了兼容性,因为ie6/7不能使用伪类,所以加上此行代码. .outer:after {;;visibility:hidden; } 现在可以改写成更优雅的代码: .outer:before, .outer:after{ content: ""; display: table; } .outer:after{ clear: both; }…

css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？一起来$('.float')

一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer">     <div class="div1">1</div>     <div class="div2">2</div>     <div class="div3">3</div> </div> 分析CSS代码样…

css清除浮动float的三种方法总结

原文地址: http://my.oschina.net/leipeng/blog/221125 张大神的解析: http://www.zhangxinxu.com/wordpress/2010/01/%E5%AF%B9overflow%E4%B8%8Ezoom%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8%E7%9A%84%E4%B8%80%E4%BA%9B%E8%AE%A4%E8%AF%86/  一.抛一块问题砖(display: block)先看现象: 分析HTML…

css清除浮动float方法

转载:http://www.cnblogs.com/ForEvErNoME/p/3383539.html 什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象.这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动. 引用W3C的例子,news容器没有包围浮动的元素. .…

清除浮动float (:after方法)

1. 什么时候需要清除浮动?清除浮动有哪些方法? (1)对元素进行了浮动(float)后,该元素就会脱离文档流,浮动在文档之上.在CSS中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. float主要流行与页面布局,然后在使用后没有清除浮动,就会后患无穷. 先看实例: <div class="outer"> <div class="div1">1</div> <div class="div…

CSS清除浮动float方法总结

使用浮动造成的BUG: 使用浮动前:(子节点是将父节点撑开了) 代码如下 <div class="box"> <div class="d1">1</div> <div class="d2">2</div> </div> .box{ border: 1px solid black: margin: 50px auto; padding: 50px; color: #fff; }…