常用的几种清除float浮动的方法 |
您所在的位置：网站首页 › 如何去清除浮动 › 常用的几种清除float浮动的方法 |
|
一、浮动产生原因
简单地说，浮动是因为使用了float:left或float:right或两者都有而产生的浮动，导致样式缺失或者不正确显示等问题； 二、浮动产生负作用1、背景不能显示由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。 2、边框不能撑开如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。 3、margin padding设置值不能正确显示由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。 三、css解决浮动，清除浮动方法首先列举一个小案例： .box{margin: 50px auto;border:1px solid #ccc;background: #fc9;color:#fff;} .red{width: 80px;height: 100px;background: red;float:left;} .sienna{width: 80px;height: 100px;background: sienna;float:left;} .blue{width: 80px;height: 100px;background: blue;float:left;} 1 2 3子元素都设置了float属性，父元素div高度不能撑开，样式margin属性显示有问题； 方法一：添加新的元素 、应用 clear：both； 在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响. 注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签，造成结构的混乱. .clear{clear: both;} 1 2 3 方法二:父级div定义 overflow: auto（注意：是父级div也就是这里的 div.outer） 原理：使用overflow属性来清除浮动有一点需要注意，overflow属性共有三个属性值：hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动，但切记不能使用visible值。 .over-flow{ overflow: auto; zoom: 1;}/*zoom1; 是在处理兼容性问题*/ 1 2 3 方法三： 使用伪元素来清除浮动(:after,注意：作用于浮动元素的父亲） 主要推荐使用这种方法清除浮动 .clearfix:after{ content:"";/*设置内容为空*/ height:0;/*高度为0*/ line-height:0;/*行高为0*/ display:block;/*将文本转为块级元素*/ visibility:hidden;/*将元素隐藏*/ clear:both;/*清除浮动*/}.clearfix{ zoom:1;/*为了兼容IE*/} 1 2 3 方法四:使用双伪元素清除浮动 .clearfix:before,.clearfix:after { content: ""; display: block; clear: both;}.clearfix { zoom: 1; } |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |