css清除浮动的几种方法

来源：互联网发布：材料预算软件编辑：程序博客网时间：2024/06/08 05:23

我一直以为产生浮动要我们给元素设定float，例如这里提到的：http://www.jianshu.com/p/09bd5873bed4

今天我发现如果父盒子高度不定，子元素没有设置浮动，如果父盒子高度变为0，那么里面的子元素会浮动，

代码：

效果：

黄色盒子上移了，很明显child产生了浮动，效果等同于父盒子高度不定，子元素设置浮动，那么父盒子高度会变成0，也就是高度坍塌。

那么如何解决？

这里的解决方法是针对父盒子高度不定，子盒子设置浮动。文章一开始提到的其实很少见，我只是通过这里联想到，毕竟是父元素盒子变成0子盒子才浮动，不算真的浮动。

浮动对页面的影响：

　　　　如果一个父盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中进行了浮动，那么将来父盒子的高度为0.由于父盒子的高度为0，

　　　　下面的元素会自动补位，所以这个时候要进行浮动的清除。

关于清除浮动的方式:

　　方式一:使用overflow属性来清除浮动

　　　　.ovh{

　　　　　　overflow:hidden;

　　　　　}

　　　　先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden,就是清除这个父元素中的子元素浮动对页面的影响.

　　　　注意：一般情况下也不会使用这种方式，因为overflow:hidden有一个特点，离开了这个元素所在的区域以后会被隐藏（overflow:hidden会将超出的部分隐藏起来）. 为什么它可以清除浮动呢？因为overflow:hidden会产生BFC，而BFC是可以包括浮动元素的。

　　方式二:使用额外标签法

　　　　.clear{

　　　　　　clear:both;

　　　　　}

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

　　　　　　a.内部标签：会将这个浮动盒子的父盒子高度重新撑开.

　　　　　　b.外部标签：会将这个浮动盒子的影响清除，但是不会撑开父盒子.

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

　　方法三:使用伪元素来清除浮动(after意思:后来,以后)，clearfix是父盒子

　　　　.clearfix:after{

content:'.';
　　display:block;
　　height:0;
　　clear:both;
visibility: hidden;
　　overflow:hidden;

　　　　　}

　　　　.clearfix{

　　　　　　zoom:1;为了兼容IE

　　　　}

　　　　总结:第一种方法会将超出部分隐藏在某些时候我们想清除浮动并且保留超出部分时做不到,第二种方法会增加许多不必要的标签,

　　　　　　所以我们尽量使用第三种方法来清除浮动，其实第三种和第二种原来差不多，只是不会添加无用的html元素。

阅读全文

0 0