CSS 清除浮动的方法

CSS中利用float属性可以使元素脱离文档流浮动到父元素的左侧或者浮动的父元素的右侧，这时如果对元素使用浮动属性，会导致父元素不能被撑开。

CSS代码:

.wrapper{width: 40em;border: 1px solid red;
}.leftFloat{width: 9em;height: 5em;background: #ffffcc;float: left;
}
.rightFloat{width: 9em;height: 5em;background: #ffffcc;float: right;
}

布局:

<div class="wrapper"><div class="leftFloat">left float</div><div class="rightFloat">right float</div></div>

效果图：

对父div内的两个div分别使用向左float和向右浮动后，父div就成了两条线，仿佛没有了内容填充了。这种浮动内部元素产生的副作用可以采用以下几种方式来消除。

1.设置父容器的高度

.wrapper{width: 40em;height: 82px; /*内容高度 + 边框高度*/border: 1px solid red;
}

设置父容器height值后，消除了浮动子元素产生的影响。但这种方式一定要确保高度是固定值，如果内容高度不定，这种方式将不再适用。

2.利用clear属性清除浮动

<div class="wrapper"><div class="leftFloat">left float</div><div class="rightFloat">right float</div><div class="clearFloat"></div></div>

.clearFloat{clear: both;
}

如上在父容器内添加一个空div,并将该div的样式属性设置为clear:both，这样也能消除浮动。

3.为父容器添加overflow:hidden属性或者overflow:auto属性

.wrapper{width: 40em;border: 1px solid red;overflow: hidden;
}

<div class="wrapper"><div class="leftFloat">left float</div><div class="rightFloat">right float</div></div>

4.为父容器添加浮动属性

.wrapper{width: 40em;border: 1px solid red;float: left;
}

父容器使用float会同时产生其他影响，当不设置父容器的宽高时，父容器的宽高根据被子元素填充大小来确定。

如去除wrpper的width属性:

.wrapper{border: 1px solid red;float: left;
}

父容器的宽高均依据子元素的填充大小确定

5.使用clearfix:after和zoom清除浮动

为父容器添加的属性类

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

其中IE8+以及其他主流浏览器支持.clearfix:after，zoom则是为了确保兼容IE6,IE7

将其应用到父容器

<div class="wrapper clearfix"><div class="leftFloat">left float</div><div class="rightFloat">right float</div></div>

这种方式清除浮动是最为推荐的，兼容性好，有不会出现其他问题。

CSS 清除浮动的方法相关推荐

div为空的时候浮动没有效果_3种CSS清除浮动的方法
点击上方 "前端技术精选" 关注,星标或者置顶 12点00分准时推送,第一时间送达作者:html中文网 | 编辑:前端妹来源:html.cn/web/css/19613.htm ...
css为什么要用浮动_3种CSS清除浮动的方法
点击上方 "前端技术精选" 关注,星标或者置顶 12点00分准时推送,第一时间送达作者:html中文网 | 编辑:前端妹来源:html.cn/web/css/19613.htm ...
css清除浮动的方法及原因
清除浮动的方法及原因为什么要清除浮动清除浮动的方法方法1:为父元素设置高度方法2:在受影响的父元素内部末尾添加块级元素-如div 方法3:伪元素清除法方法4:给父元素设置overflow: ...
CSS清除浮动的方法
我们先看看浮动导致什么样的效果. 正常没有浮动的案例如下: <!DOCTYPE html> <html><head><meta charset="u ...
web前端css清除浮动的方法总结
方法1:祖先加高法 //不常用,不能适应页面的快速变化如果一个元素要浮动,那么它的祖先元素一定要有高度.有高度的盒子,才能关住浮动. 只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的浮动元 ...
CSS清除浮动的方法及原理
为什么清除浮动 1.浮动的缺点: 浮动虽然可以便于页面布局,但同时会产生一些问题,也就是我们常说的"副作用".一个元素设置了浮动(即 float 值为 left, right 或 ...
前端开发面试题—CSS清除浮动的方法
活学活用，CSS清除浮动的4种方法
清除浮动这个问题,做前端的应该再熟悉不过了,咱是个新人,所以还是记个笔记,做个积累,努力学习向大神靠近. CSS清除浮动的方法网上一搜,大概有N多种,用过几种,说下个人感受. 1.结尾处加空div标签 ...
css清除浮动无效,css清除浮动的处理方法
根据<精彩绝伦的css> JS Bin .news{ outline:1px solid pink } .col{ float: left; width:33%; outline:1px ...

CSS 清除浮动的方法

CSS 清除浮动的方法相关推荐

最新文章

热门文章