`

【转】清除浮动解决方案

    博客分类:
  • css
 
阅读更多

两种情况

清除浮动包括清除子元素的浮动和清除上级元素的浮动,其中清除上级元素的浮动,只需设置clear为both就可以了,而清除子元素的浮动则可以用空标签法、clearfix方法或overflow方法。因清除上级元素的浮动比较简单,而空标签法清除子元素浮动会增加额外标签,所以在这里主要说clearfix方法、overflow方法及偶然发现的inline-block方法。

为什么要清除浮动

一个块级元素的高度如果没有设置height,那么其高度就是由里面的子元素来撑开的,如果子元素使用浮动,脱离了标准的文档流,那么父元素的高度会将其忽略,你可以使用firebug查看下如果不清除浮动,父元素会出现高度不够,那样如果设置border或者background都得不到正确的解析

清除子元素浮动clearfix方法

demo 1 clearfix方法

  • img1
  • img2
  • img3

Html Code

<ul id="demo1" class="nostyle demo clearfix">
   <li><img alt="img1" src="http://placehold.it/150/ffffff/00c5e3&amp;text=demo"></li>
   <li><img alt="img2" src="http://placehold.it/150/ffffff/00c5e3&amp;text=demo"></li>
   <li><img alt="img3" src="http://placehold.it/150/ffffff/00c5e3&amp;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方法

  • img1
  • img2
  • img3

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方法

  • img1
  • img2
  • img3

Css Code

 

#demo3{
	display:inline-block;*display:inline;*zoom:1;
}
分享到:
评论

相关推荐

    HTML5 清除浮动

    总的来说,HTML5在布局方面提供了更多的解决方案,包括新的标签和CSS属性,帮助开发者更轻松地处理浮动元素和布局问题。清除浮动是确保页面结构正确显示的关键技术,开发者需要熟练掌握并灵活运用这些方法。无论是...

    css 完美清除浮动的两种解决方案

    在CSS布局中,浮动元素(`float`属性设置...`clear:both`和CSS伪元素是两种经典的清除浮动方法,而现代布局技术如Flexbox和Grid提供了更强大且简洁的解决方案。选择哪种方法取决于项目需求、浏览器兼容性和代码简洁性。

    CSS浮动详解及其解决方案

    内容概要:本文档全面讲解CSS浮动概念,浮动规则、实际应用及解决方案。详细讲述了通过使用float属性进行左右布局的基本方法,包括浮动的基础、浮动的常见规则以及在各种布局场合的应用示例,并着重解决了由浮动引发...

    清除浮动.pdf

    随着现代浏览器的普及,使用Flexbox或Grid布局可以提供更简洁、更强大的解决方案,但要确保对旧浏览器的支持,可能还需要结合传统的清除浮动方法。总之,理解和掌握这些方法,能够帮助开发者在各种场景下有效地管理...

    css清除浮动的方法有哪些?.docx

    这是一种更为现代且优雅的解决方案,适用于支持CSS伪元素的浏览器。通过在浮动元素的容器上应用`:after`伪元素,创建一个看不见的块元素,以此清理浮动。CSS代码如下: ```css .clearfix:after { content: "020"; ...

    清除浮动.docx

    为了解决这个问题,有多种清除浮动的方法。 1. **传统方法:额外元素清除** 这是最原始的方法,即在父容器内添加一个额外的元素,通常使用`&lt;div class="clear"&gt;&lt;/div&gt;`,并为其设置样式`clear:both`。这样,这个...

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

    在网页布局设计中,CSS(层叠样式表)的浮动属性是至关重要的,它允许元素脱离文档流并根据周围内容调整自身位置。然而,当多个浮动元素在一起时,...同时,随着现代浏览器的普及,Flexbox正在成为首选的布局解决方案。

    浮动从何而来 我们为何要清除浮动 清除浮动的原理是什么

    5. 使用CSS Flexbox或Grid布局:现代CSS布局技术如Flexbox和Grid可以替代浮动布局,提供更强大、更灵活的布局解决方案,而且不会有浮动带来的副作用。 了解浮动和清除浮动的原理对于理解和解决布局问题至关重要。在...

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

    这种方法在早期被广泛应用,但现在已逐渐被更现代的解决方案取代。 2. **使用`:after`伪元素**:为父元素添加`:after`伪元素,并设置`content: ""; display: block; clear: both;`。这样可以不需额外HTML标签就能...

    css清除浮动

    本文将详细探讨CSS中的清除浮动机制,包括其原理、常见问题以及多种解决方案。 #### 二、浮动溢出现象及其成因 在CSS布局中,当一个元素设置了`float`属性(通常为`left`或`right`),该元素会脱离文档流并移动到...

    .clear 万能清除浮动(clearfix:after)

    为了解决这个问题,开发者通常会使用“清除浮动”(clearing the float)的方法,`.clear 万能清除浮动`(clearfix:after)就是一种常用的解决方案。 `.clear 万能清除浮动` 实际上是一种 CSS 技巧,用于修复由于...

    父元素的高度为0利用伪元素:after清除浮动可解决问题

    为了解决这个问题,CSS提供了一种更优雅的解决方案,那就是使用伪元素`:after`。 `:after`伪元素是CSS中的一个特殊选择器,它可以在任何元素的末尾添加内容,而无需在HTML中实际添加任何额外的元素。通过将`:after`...

    CSS 清除浮动元素方法 整理

    另一种更优雅的解决方案是使用CSS伪元素`:after`,结合`content`、`clear`、`height`、`visibility`和`display`属性。通过在父元素上应用`.clearfix`类,我们可以创建一个看不见的内联块元素,这个元素会自动清除...

    清理浮动的几种方法

    浮动布局在CSS中是一种经典而基础的布局方式,它允许元素...对于现代浏览器,使用`:after`伪元素和`overflow`属性是比较常见的解决方案,而为了照顾到老版本的IE浏览器,则可能需要结合`clear`样式或`hasLayout`技巧。

    CSS教程 伪清除浮动

    为了解决这个问题,我们可以采用不同的清除浮动(Clear Float)方法,其中“伪清除浮动”是一种常见的解决方案。 在传统的清除浮动方式中,我们通常会在浮动元素后面添加一个额外的元素,并设置`clear:both`属性,...

    CSS3 清除浮动的方法示例

    在CSS3中,虽然浮动仍然是一个有用的布局工具,但现代布局技术如Flexbox和Grid提供了更强大、更灵活的解决方案,减少了对清除浮动的需求。然而,在向后兼容性考虑或特定场景下,理解并熟练运用清除浮动的方法仍然很...

    css清除浮动的几种方法和示例

    在CSS布局中,浮动元素(float)经常被用来创建多列...在实际项目中,使用`:after`伪元素创建伪元素或使用`overflow`属性通常是较为推荐的解决方案,因为它们不会增加HTML的复杂性,同时在大多数现代浏览器中表现良好。

    CSS清除浮动方法总结

    在实际开发中,使用`:before`和`:after`伪类的方法通常被认为是最优解决方案,因为它既不会引入无意义的HTML结构,也不会因为固定高度而产生问题。同时,这种方法在响应式设计中也更为灵活,因为它是基于CSS的,易于...

Global site tag (gtag.js) - Google Analytics