清除子元素浮动方法总结_Android, Python及开发编程讨论区_Weblogic技术|Tuxedo技术|中间件技术|Oracle论坛|JAVA论坛|Linux/Unix技术|hadoop论坛_联动北方技术论坛  
网站首页 | 关于我们 | 服务中心 | 经验交流 | 公司荣誉 | 成功案例 | 合作伙伴 | 联系我们 |
联动北方-国内领先的云技术服务提供商
»  游客             当前位置:  论坛首页 »  自由讨论区 »  Android, Python及开发编程讨论区 »
总帖数
1
每页帖数
101/1页1
返回列表
0
发起投票  发起投票 发新帖子
查看: 2148 | 回复: 0   主题: 清除子元素浮动方法总结        下一篇 
dream007
注册用户
等级:少校
经验:1086
发帖:53
精华:0
注册:2015-7-2
状态:离线
发送短消息息给dream007 加好友    发送短消息息给dream007 发消息
发表于: IP:您无权察看 2015-9-10 23:53:39 | [全部帖] [楼主帖] 楼主

在web前端开发中,清除浮动也算是一个小难题,总结了一下解决浮动的几个方式,简单粗暴,直接有效。

问题描述:当子元素使用了float属性时,父容器无法根据子元素高度而自适应高度,为了解决该问题,通常有以下三种做法:

  1.让父元素也浮动起来,例如:

    

<div class="fl">
    <div class="fl">
    </div></div>
1
.fl{float:left;display:inline}

  这种方式是会让父元素也变得浮动,影响后面的布局,其实有副作用。

2.比较常见的处理,在浮动元素后面加一个清楚浮动的空标签

<div>
    <div class="fl"></div>
    <div class="cb"></div></div>
.fl{float:left;display:inline}.cb{clear:both}

   本例中cb类是为了清楚浮动而设置的,理论上没有问题,但是多加了一个空标签,一定程度上破坏了语义化。

3.直接在父容器中清除浮动

<div class="clearfix">
    <div class="fl">
    </div></div>
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:jidden}.clearfix{display:inline-block}*html
.clearfix{height:1%}

    这是最直接有效的方法,而且不会带来其他影响,建议采用。





赞(0)    操作        顶端 
总帖数
1
每页帖数
101/1页1
返回列表
发新帖子
请输入验证码: 点击刷新验证码
您需要登录后才可以回帖 登录 | 注册
技术讨论