`
SwordShadow
  • 浏览: 268128 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

CSS 浮动与清除

    博客分类:
  • css
css 
阅读更多

CSS清除与浮动

特点:

父元素默认不包含浮动元素

浮动元素脱离了文档流,其父元素也看不到它了,因而也不会包围它;原来紧跟其后的元素就会在空间允许的情况下,向上提升与浮动元素平起平坐

如果有两个相邻元素,第一个浮动,第二个清除,清除后它就会呆在浮动元素下方

围住浮动元素的三种方法:

第一个方法很简单,缺点是不太直观,即为父元素应用overflow:hidden,以强制它包围浮动元素。

第二种促使父元素包围其浮动子元素的方法,是也让父元素浮动起来。

第三种添加非浮动的清除元素:第三种强制父元素包含其浮动子元素的方法,就是给父元素的最后添加一个非浮动的子元素,然后清除该子元素。

div元素

使用clearfix规则

.clearfix:after {   
  content:".";  
  display:block;  
  height:0;   
 visibility:hidden;
 clear:both;}

 
 

 

 

 

 

分享到:
评论

相关推荐

    CSS浮动与清除浮动

    今天是第一次写博客,已经迫不及待地想把这周在逆战班学习的内容分享一下,这是我对css浮动与清除浮动的理解,希望可以帮助你。 CSS浮动与清除浮动( 本文以div元素布局为例。) 前言:由于CSS内容比较多,只能有...

    CSS清除浮动_清除float浮动 - DIVCSS5.htm

    具体详细的阐述了css浮动如何解决和浮动产生的原因。

    css中3种清除浮动方法

    css中3种清除浮动方法css中3种清除浮动方法

    CSS清除浮动_2种方法源代码.zip

    清除CSS浮动 CSS清除浮动_2种方法源代码.zip

    div+css清除浮动

    div+css清除浮动

    css清除浮动大全

    css清除浮动大全--------共8种方法

    css 浮动实例c#网站开发

    浮动和清理 实例 1.float 属性的简单应用 使图像浮动于一个段落的右侧。 2.将带有边框和边界的图像浮动于段落的右侧 使图像浮动于段落的右侧。向图像添加边框和边界。...本例演示如何使用清除元素侧面的浮动元素。

    CSS-清除浮动

    从别人博客看来的,整理成了PPT,分享下吧,感觉挺好懂的

    CSS清除浮动大全共8种方法

    css清除浮动大全,共8种方法。 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了。...

    浅谈css中浮动和清除浮动带来的影响

    主要介绍了浅谈css中浮动和清除浮动带来的影响,通过代码示例和图片展示详细介绍讲解了浮动的应用和实现效果,需要的朋友可以参考下

    CSS技术:清除浮动的最优方法.pdf

    CSS技术:清除浮动的最优方法.pdf

    xhtml+css清除浮动的3种方法

    做xhtml+css页面重构的人员很注重的一点就是浮动,而浮动最头痛的就是如何清除。文件是我整理的3种清除浮动的方法,3种方法各有优缺点,页面重构师需要结合使用

    CSS浮动所差生的内容溢出问题及清除浮动的方法小结

    CSS的float浮动效果在一些情况下非常不稳定,控制不好的时候一般还是清除浮动为妙,这里我们就来看一下CSS浮动所差生的内容溢出问题及清除浮动的方法小结

    浅谈css清除浮动(clearfix和clear)的用法

    本文主要是讲解如何在 html 中使用 clearfix 和 clear,针对那些刚开始了解 css 的童鞋。关于 clearfix 和 clear 的样式在这里我就不写了。 下面就谈谈对于这两个 class 的用法,首先我们先看个例子: XML/HTML Code...

    DIV+CSS 清除浮动常用方法总结

    DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所帮助。...

    CSS实验室.rar

    1.CSS背景试验1.doc 2.CSS背景试验2.doc 3.CSS颜色.doc 4.CSS文字.doc 5.CSS文本.doc 6.CSS列表.doc 7.CSS边框.doc 8.CSS填充(padding).doc 9.CSS边界(margin).doc ...16.CSS浮动.doc 17.CSS清除浮动.doc

    CSS:清除浮动的最优方法

    在CSS森林群里讨论一个margin的问题中无意间发现overflow也可以用来清除浮动,嘿嘿,这个方法不单使用简单,而且FF、OP、IE7都支持,从此可以告别那又长兼容性又差的FF清浮动的方法了。方法真的很简单,只要为需要清...

    CSS的clear属性清除浮动的基本用法示例

    清除浮动就是指解决浮动元素溢出容器的操作,其方法多种多样,这里我们来看最基本的一种:CSS的clear属性清除浮动的基本用法示例

    css别忘记清除浮动clear:both

    总结下清除浮动的一般解决方案,做网页时要注意

Global site tag (gtag.js) - Google Analytics