两种情况
清除浮动包括清除子元素的浮动和清除上级元素的浮动,其中清除上级元素的浮动,只需设置clear为both就可以了,而清除子元素的浮动则可以用空标签法、clearfix方法或overflow方法。因清除上级元素的浮动比较简单,而空标签法清除子元素浮动会增加额外标签,所以在这里主要说clearfix方法、overflow方法及偶然发现的inline-block方法。
为什么要清除浮动
一个块级元素的高度如果没有设置height,那么其高度就是由里面的子元素来撑开的,如果子元素使用浮动,脱离了标准的文档流,那么父元素的高度会将其忽略,你可以使用firebug查看下如果不清除浮动,父元素会出现高度不够,那样如果设置border或者background都得不到正确的解析
清除子元素浮动clearfix方法
demo 1 clearfix方法
Html Code
<ul id="demo1" class="nostyle demo clearfix"> <li><img alt="img1" src="http://placehold.it/150/ffffff/00c5e3&text=demo"></li> <li><img alt="img2" src="http://placehold.it/150/ffffff/00c5e3&text=demo"></li> <li><img alt="img3" src="http://placehold.it/150/ffffff/00c5e3&text=demo"></li> </ul>
Css Code
/*简洁版*/ .clearfix:before, .clearfix:after { content:""; display:table; } .clearfix:after{ clear:both; overflow:hidden; } .clearfix{ zoom:1; } /* 经典版 */ .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */
注:clearfix的方法主要就是在浮动元素的父元素上加上一个clearfix class,然后这个父元素的框就会包括所有的浮动子元素。
清除子元素浮动overflow方法
demo 2 overflow方法
Css Code
/* overflow:auto */ #demo2{ overflow:auto;*zoom:1; } /*或 overflow:hidden */ #demo2{ overflow:hidden;*zoom:1; }
注:这种方法主要是对父元素设置css,所以不需要加个class,下面的inline-block方法相同,只需设置父元素的css即可
清除子元素浮动inline-block方法
注:这个方法是我在写本文的时候发现的,完美兼容浏览器,因为是偶然发现的,还没有大量运用,所以暂作推荐,有兴趣的可以私下测试,当然它清除的子元素浮动和前面两种还是有点差别的,细心的你早就发现了,前面两个demo比下面的这个demo宽度要大啊呵呵,inline-block正常表现
demo 3 inline-block方法
Css Code
#demo3{ display:inline-block;*display:inline;*zoom:1; }
相关推荐
总的来说,HTML5在布局方面提供了更多的解决方案,包括新的标签和CSS属性,帮助开发者更轻松地处理浮动元素和布局问题。清除浮动是确保页面结构正确显示的关键技术,开发者需要熟练掌握并灵活运用这些方法。无论是...
在CSS布局中,浮动元素(`float`属性设置...`clear:both`和CSS伪元素是两种经典的清除浮动方法,而现代布局技术如Flexbox和Grid提供了更强大且简洁的解决方案。选择哪种方法取决于项目需求、浏览器兼容性和代码简洁性。
内容概要:本文档全面讲解CSS浮动概念,浮动规则、实际应用及解决方案。详细讲述了通过使用float属性进行左右布局的基本方法,包括浮动的基础、浮动的常见规则以及在各种布局场合的应用示例,并着重解决了由浮动引发...
随着现代浏览器的普及,使用Flexbox或Grid布局可以提供更简洁、更强大的解决方案,但要确保对旧浏览器的支持,可能还需要结合传统的清除浮动方法。总之,理解和掌握这些方法,能够帮助开发者在各种场景下有效地管理...
这是一种更为现代且优雅的解决方案,适用于支持CSS伪元素的浏览器。通过在浮动元素的容器上应用`:after`伪元素,创建一个看不见的块元素,以此清理浮动。CSS代码如下: ```css .clearfix:after { content: "020"; ...
为了解决这个问题,有多种清除浮动的方法。 1. **传统方法:额外元素清除** 这是最原始的方法,即在父容器内添加一个额外的元素,通常使用`<div class="clear"></div>`,并为其设置样式`clear:both`。这样,这个...
在网页布局设计中,CSS(层叠样式表)的浮动属性是至关重要的,它允许元素脱离文档流并根据周围内容调整自身位置。然而,当多个浮动元素在一起时,...同时,随着现代浏览器的普及,Flexbox正在成为首选的布局解决方案。
5. 使用CSS Flexbox或Grid布局:现代CSS布局技术如Flexbox和Grid可以替代浮动布局,提供更强大、更灵活的布局解决方案,而且不会有浮动带来的副作用。 了解浮动和清除浮动的原理对于理解和解决布局问题至关重要。在...
这种方法在早期被广泛应用,但现在已逐渐被更现代的解决方案取代。 2. **使用`:after`伪元素**:为父元素添加`:after`伪元素,并设置`content: ""; display: block; clear: both;`。这样可以不需额外HTML标签就能...
本文将详细探讨CSS中的清除浮动机制,包括其原理、常见问题以及多种解决方案。 #### 二、浮动溢出现象及其成因 在CSS布局中,当一个元素设置了`float`属性(通常为`left`或`right`),该元素会脱离文档流并移动到...
为了解决这个问题,开发者通常会使用“清除浮动”(clearing the float)的方法,`.clear 万能清除浮动`(clearfix:after)就是一种常用的解决方案。 `.clear 万能清除浮动` 实际上是一种 CSS 技巧,用于修复由于...
为了解决这个问题,CSS提供了一种更优雅的解决方案,那就是使用伪元素`:after`。 `:after`伪元素是CSS中的一个特殊选择器,它可以在任何元素的末尾添加内容,而无需在HTML中实际添加任何额外的元素。通过将`:after`...
另一种更优雅的解决方案是使用CSS伪元素`:after`,结合`content`、`clear`、`height`、`visibility`和`display`属性。通过在父元素上应用`.clearfix`类,我们可以创建一个看不见的内联块元素,这个元素会自动清除...
浮动布局在CSS中是一种经典而基础的布局方式,它允许元素...对于现代浏览器,使用`:after`伪元素和`overflow`属性是比较常见的解决方案,而为了照顾到老版本的IE浏览器,则可能需要结合`clear`样式或`hasLayout`技巧。
为了解决这个问题,我们可以采用不同的清除浮动(Clear Float)方法,其中“伪清除浮动”是一种常见的解决方案。 在传统的清除浮动方式中,我们通常会在浮动元素后面添加一个额外的元素,并设置`clear:both`属性,...
在CSS3中,虽然浮动仍然是一个有用的布局工具,但现代布局技术如Flexbox和Grid提供了更强大、更灵活的解决方案,减少了对清除浮动的需求。然而,在向后兼容性考虑或特定场景下,理解并熟练运用清除浮动的方法仍然很...
在CSS布局中,浮动元素(float)经常被用来创建多列...在实际项目中,使用`:after`伪元素创建伪元素或使用`overflow`属性通常是较为推荐的解决方案,因为它们不会增加HTML的复杂性,同时在大多数现代浏览器中表现良好。
在实际开发中,使用`:before`和`:after`伪类的方法通常被认为是最优解决方案,因为它既不会引入无意义的HTML结构,也不会因为固定高度而产生问题。同时,这种方法在响应式设计中也更为灵活,因为它是基于CSS的,易于...