清除浮动的方法

最新推荐文章于 2023-07-20 17:15:10 发布

小满1997

最新推荐文章于 2023-07-20 17:15:10 发布

阅读量289

点赞数

原文链接：https://www.cnblogs.com/lingdu87/p/7770752.html

版权

一、浮动产生原因

简单地说，浮动是因为使用了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解决浮动，清除浮动方法

首先列举一个小案例：

<style>
    .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;}
</style>

<body>
<div class="box">
    <div class="red">1</div>
    <div class="sienna">2</div>
    <div class="blue">3</div>
</div>
</body>
子元素都设置了float属性，父元素div高度不能撑开，样式margin属性显示有问题；

方法一：添加新的元素 、应用 clear：both；

在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响.

注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签，造成结构的混乱.

.clear{clear: both;}

<div class="box">
    <div class="red">1</div>
    <div class="sienna">2</div>
    <div class="blue">3</div>
    <div class="clear"></div>
</div>

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

原理：使用overflow属性来清除浮动有一点需要注意，overflow属性共有三个属性值：hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动，但切记不能使用visible值。

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

<body>
<div class="box over-flow">
    <div class="red">1</div>
    <div class="sienna">2</div>
    <div class="blue">3</div>
</div>
</body>

方法三： 使用伪元素来清除浮动(:after,注意：作用于浮动元素的父亲）

主要推荐使用这种方法清除浮动

.clearfix:after{
    content:"";/*设置内容为空*/
    height:0;/*高度为0*/
    line-height:0;/*行高为0*/
    display:block;/*将文本转为块级元素*/
    visibility:hidden;/*将元素隐藏*/
    clear:both;/*清除浮动*/
}
.clearfix{
    zoom:1;/*为了兼容IE*/
}

<body>
<div class="box clearfix">
    <div class="red">1</div>
    <div class="sienna">2</div>
    <div class="blue">3</div>
</div>
</body>

方法四:使用双伪元素清除浮动

.clearfix:before,.clearfix:after {
     content: "";
     display: block;
     clear: both;
}
.clearfix {
     zoom: 1;
 }

小满1997

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
清除浮动的方法

一、浮动产生原因简单地说，浮动是因为使用了float:left或float:right或两者都有而产生的浮动，导致样式缺失或者不正确显示等问题；二、浮动产生负作用1、背景不能显示由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。2、边框不能撑开如果父级设置了CSS边框属性（css b...
复制链接

扫一扫