css清楚浮动

 css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?一起来$('.float')
原文 https://my.oschina.net/leipeng/blog/221125
 
  • 发表于 2年前 
  • 阅读 57364 
  • 收藏 30 
  • 点赞 6 
  • 评论 2

摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?

    一、抛一块问题砖(display: block)先看现象:

    分析HTML代码结构:

<div class="outer">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
</div>

     分析CSS代码样式:

.outer{border1px solid #ccc;background#fc9;color#fffmargin50px auto;padding50px;}
.div1{width80px;height80px;background: red;float: left;}
.div2{width80px;height80px;background: blue;float: left;}
.div3{width80px;height80px;background: sienna;float: left;}

    这里我没有给最外层的DIV.outer 设置高度,但是我们知道如果它里面的元素不浮动的话,那么这个外层的高是会自动被撑开的。但是当内层元素浮动后,就出现了一下影响:

    (1):背景不能显示 (2):边框不能撑开 (3):margin 设置值不能正确显示

    二、清楚css浮动:

            方法一:添加新的元素 、应用 clear:both;

HTML:

<div class="outer">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="clear"></div>
</div>

CSS:

.clear{clear:both; height0line-height0font-size0}

result: (纠正: padding不会受影响

    方法二:父级div定义 overflow: auto注意:是父级div也就是这里的  div.outer

HTML:

<div class="outer over-flow"> //这里添加了一个class
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <!--<div class="clear"></div>-->
</div>

CSS:

.over-flow{
    overflow: auto; zoom: 1//zoom: 1; 是在处理兼容性问题
}

结果:当然是实现了!  img{display: none}; 略图

    原理:使用overflow属性来清除浮动有一点需要注意,overflow属性共有三个属性值:hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动,但切记不能使用visible值,如果使用这个值将无法达到清除浮动效果,其他两个值都可以,其区据说在于一个对seo比较友好,另个hidden对seo不是太友好,其他区别我就说不上了,也不浪费时间。

    方法三: 据说是最高大上的方法  :after 方法:(注意:作用于浮动元素的父亲)

    先说原理:这种方法清除浮动是现在网上最拉风的一种清除浮动,他就是利用:after和:before来在元素内部插入两个元素块,从面达到清除浮动的效果。其实现原理类似于clear:both方法,只是区别在于:clear在html插入一个div.clear标签,而outer利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。下面来看看其具体的使用方法:

.outer {zoom:1;}    /*==for IE6/7 Maxthon2==*/
.outer :after {clear:both;content:'.';display:block;width0;height0;visibility:hidden;}   /*==for FF/chrome/opera/IE8==*/

    其中clear:both;指清除所有浮动;content: '.'; display:block;对于FF/chrome/opera/IE8不能缺少,其中content()可以取值也可以为空。visibility:hidden;的作用是允许浏览器渲染它,但是不显示出来,这样才能实现清楚浮动。

最后:但不是不重要,也不是不知道! 

        下一标签直接清浮动兄弟标签浮动时,在下一标签的属性中直接写入清除clear:both;这样就可以清除以上标签的浮动而不用加入空标签来清除浮动。


    $('.float').end().结语:清除浮动的方式虽然是有很多种,但是不是每种都适合你,也不是每种都能很好的兼容所有浏览器,所以参照你觉得最好的方式去做,个人觉得方法三不错,不需多于的标签,而且也能很好的兼容。再次again:当一个内层元素是浮动的时候,如果没有关闭浮动时,其父元素也就不会再包含这个浮动的内层元素,因为此时浮动元素已经脱离了文档流。也就是为什么外层不能被撑开了!


<think>好的,用户现在想解决CSS中清除浮动的问题,特别是关于clear fix的方法。我需要结合之前提供的引用内容,给出详细的解答。首先,用户之前的问题是关于文字竖排,但现在转向了清除浮动,这可能是因为在实现布局时遇到了浮动导致的问题,比如父元素高度塌陷。首先,我应该回顾用户提供的引用内容,尤其是引用[1]、[2]、[3]、[4]、[5],这些引用详细讨论了清除浮动的各种方法,包括伪元素、额外标签法、overflow方法等。用户特别提到了clearfix,所以重点应该放在伪元素方法上,尤其是.clearfix类的使用。接下来,我需要整理这些方法,并按照推荐程度排序。引用[2]提到几种清除浮动的方式,其中伪元素方法被认为符合闭合浮动思想,结构语义化正确,但需要注意IE兼容性。而引用[3]提供了不同的.clearfix写法,包括Bootstrap中的版本,这可能是一个常用的方案。 用户可能希望了解不同方法的优缺点,以及如何选择。需要解释清楚每种方法的原理,比如使用:after伪元素在父容器末尾插入一个块级元素来清除浮动,同时处理父元素的高度问题。此外,还要提到兼容性问题,比如旧版IE需要zoom:1来触发hasLayout。 还要注意用户提到的引用[4]中的例子,其中父元素因为子元素浮动导致高度为0,这时候使用clearfix可以解决。同时,引用[5]提到在兄弟元素上使用clear:both的方法,但这种方法需要每个受影响的元素都添加,比较麻烦,不如clearfix方便。 最后,要确保回答结构清晰,分点说明,并给出代码示例,比如标准的.clearfix实现,Bootstrap的版本,以及可能的其他方法如overflow:hidden。同时,生成的相关问题要围绕清除浮动的其他方法、BFC机制、兼容性处理等展开。</think>### CSS清除浮动的五种方法及原理 在CSS布局中,浮动元素会导致父元素高度塌陷,以下是专业开发者推荐的解决方案: --- #### **方法一:clearfix伪元素法(最佳实践)** 通过`:after`伪元素在容器尾部插入不可见块级元素,兼容现代浏览器及IE6+[^1][^3] ```css .clearfix::after { content: ""; display: block; clear: both; /* 清除两侧浮动 */ visibility: hidden; /* 隐藏元素但保留布局空间 */ height: 0; /* 避免意外撑开高度 */ } .clearfix { *zoom: 1; /* 触发IE6/7的hasLayout */ } ``` **使用场景**:需要语义化清除浮动的现代布局,Bootstrap等框架标准方案[^3] --- #### **方法二:双伪元素优化版** 同时使用`:before`和`:after`伪元素,增强布局稳定性 ```css .clearfix:before, .clearfix:after { content: ""; display: table; /* 触发BFC防止外边距合并 */ } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } ``` **优势**:通过`display: table`创建匿名表格单元,防止子元素外边距穿透[^3] --- #### **方法三:overflow触发BFC** 利用块级格式化上下文特性自动包含浮动元素 ```css .container { overflow: hidden; /* 或 auto/scroll */ zoom: 1; /* 兼容IE6/7 */ } ``` **限制**:可能隐藏溢出内容或产生滚动条[^2] --- #### **方法四:额外标签法** 在浮动元素末尾添加空标签 ```html <div class="float-left"></div> <div style="clear: both;"></div> <!-- 清除元素 --> ``` **缺点**:引入无意义标签破坏HTML结构[^2][^5] --- #### **方法五:inline-block清除法** 通过改变父元素显示模式实现 ```css .clearfix { display: inline-block; /* 自动包含浮动元素 */ width: 100%; /* 保持块级特性 */ } ``` **注意**:可能影响元素间的默认间距[^3] --- ### 原理对比表 | 方法 | 核心机制 | 兼容性 | 代码侵入性 | |-----------------|-----------------------|-----------|------------| | clearfix伪元素 | 生成清除块 | IE6+ | 低 | | overflow | BFC布局上下文 | IE6+ | 中 | | 额外标签 | 物理清除 | 全兼容 | 高 | | inline-block | 改变显示模式 | IE8+ | 中 | --- ### 选择建议 1. **现代项目**:优先使用clearfix双伪元素方案[^3] 2. **简单布局**:可考虑`overflow:hidden`快速实现[^2] 3. **传统系统**:配合`zoom:1`保证IE兼容性[^1] 4. **框架开发**:参考Bootstrap的标准化实现[^3] ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值