CSS清除浮动

最新推荐文章于 2024-09-11 20:12:18 发布

pxy_Shineyo

最新推荐文章于 2024-09-11 20:12:18 发布

阅读量372

点赞数

分类专栏： CSS 文章标签： css float 清除浮动父子元素文档流

本文链接：https://blog.csdn.net/PXYStyle/article/details/48400447

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、浮动产生的原因是什么呢

浮动是什么情况呢？一般是一个盒子里使用了CSS float浮动属性，浮动的元素已经脱离了文档流，导致父级对象盒子不能被撑开，这样子CSS 浮动就产生了。

2、浮动产生负作用

由于浮动产生，如果对父级设置了样式（如： background、border等），而父级不能被撑开，所以导致样式不能显示。还有margin padding设置值不能正确显示，由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

<div class="father">
		<div class="left">left</div>
		<div class="right">right</div>
</div>

<pre name="code" class="css"><style type="text/css">
        .father { width: 500px;height: auto;border: 4px solid #F31E1E;padding:4px; }
        .left { float: left;width: 200px;height:150px;border: 2px solid #9DE41C;  }
        .right { float: right;width: 200px;height: 150px;border: 2px solid #EEE818;}
</style>

由于子div元素都设置了浮动属性，导致父元素的高度不能撑开。

3、清除浮动的方法

a.给父元素设置固定高度

<style type="text/css">
        .father { width: 500px;height: auto;border: 4px solid #F31E1E;padding:4px; }
        .left { float: left;width: 200px;height:150px;border: 2px solid #9DE41C;  }
        .right { float: right;width: 200px;height: 150px;border: 2px solid #EEE818;}
</style>

b.给父元素添加overflow属性，给父元素添加了overflow:hidden即可实现清除浮动的效果，当然overflow:auto也是可以的。
优点是比较简单，缺点是父元素设置固定的高度或者宽度的话可能会隐藏子元素，或者出现滚动条，影响布局.

</pre><pre name="code" class="css"><style type="text/css">
        .father{positon:relative;top:200px;left:300px;width: 500px;height: auto;border: 4px solid #F31E1E; padding: 4	px;overflow: hidden;}
        .left{float: left;width: 200px;height:150px;border: 2px solid #9DE41C;  }
        .right{float: right;width: 200px;height: 150px;border: 2px solid #EEE818;}
	</style>

c.使用伪类before和after:

<style type="text/css">
        .father{positon:relative;top:200px;left:300px;width: 500px;height: auto;border: 4px solid #F31E1E; padding: 4px;}
        .father:after{    
                content:"";    
                display:block;    
                height:0;    
                visibility:hidden;    
                clear:both;  
} 
        .left{float: left;width: 200px;height:150px;border: 2px solid #9DE41C;  }
        .right{float: right;width: 200px;height: 150px;border: 2px solid #EEE818;}
	</style>

这种办法就比较好了，没有添加任何额外的HTML标签，又不会影响页面布局.