导读:
CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列,Float(浮动),往往是用于图像,使得文字围绕图片的效果,而它在布局时一样非常有用。不过有利也有弊,使用浮动的时候也会带来一些负面效果。为了不因浮动元素破坏整个文档的布局,所以需要清除浮动,而今清除浮动的方法众多,在此就常见的方法进行理解和记录。
基本概念
首先我们来看一下下面这种情况:父元素的边框未被撑开,子元素从下方溢出。
清除浮动前
清除浮动后
为什么会产生上面的情况呢,由于浮动的特性,导致本属于普通流中的元素浮动之后脱离了该流,包含框内部由于不存在其他普通流元素了,也就表现出所谓高度塌陷。而高度的塌陷使页面后面的布局不能正常显示,造成我们本不期望的效果,总的来说浮动带来的负作用包括:
- 边框不能撑开
- 背景不能显示
- margin 设置值不能正确显示
清除方法
由于浮动带来的影响,所以清除浮动很有必要,而今清除浮动方法不少,不过个别方法也存在着兼容性的问题,接下来就常用的几种方法做下简单的介绍。
1、使用clear属性
在浮动元素下方添加空div,并给该元素写css样式:
//代码简洁,浏览器支持好
.clearfix{ clear:both }
//增加了无意义的结构元素
2、使用overflow属性
给浮动元素的父元素定义 overflow: auto 或者 定义 overflow: hidden:
////代码简洁
.overflow: hidden; zoom: 1; //zoom: 1; 兼容低版IE
//不能和position配合使用,因为超出的尺寸的会被隐藏
3、为父元素指定高度
给浮动元素的父元素指定高度:
//简单,简洁
width: * px;
//只适合高度固定的布局
4、伪元素(推荐)
给浮动元素的父元素定义 overflow: auto 或者 定义 overflow: hidden:
.clear{ zoom: 1; } // zoom: 1; 兼容低版IE
.clear:after{
content: '';
display: block;
clear: both;
height: 0; // 避免生成内容破坏原有布局的高度
overflow: hidden;
visibility: hidden;}
zoom
属性目前是IE的专有属性,设置该值之后,所设置的元素就会就会扩大或者缩小,高度宽度就会重新计算了,这里一旦改变该值时其实也会发生重新渲染,运用这个原理,也就解决了 IE 下子元素浮动时候父元素不随着自动扩大的问题。
写在最后
清除浮动常用的方法大概就是这几个,在不同的场景下选用最合适的方法就是最好的方法。更多内容点击查看 CSS 浮动。
如果文中有什么错误,欢迎大家指正,愿与大家在交流之*同进步,愈激烈,愈深刻。感谢。