关于元素的float属性以及清除浮动的总结

来源：互联网发布：dos启动windows 编辑：程序博客网时间：2024/06/04 19:21

一直以来都纠结过float元素的使用，毕竟楼主是一个小白。查了很多资料，自己也做了几个demo，把自己看见的东西总结到这里吧，也希望是给自己做一个笔记，也给各位和我一样的小白铺铺路。

首先，float元素的设计之初是为了实现文字浮动在图片或者一个框的周围，下面拽一句英文，大家可以谷歌翻译一下（我是这样），The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.（我一直很崇尚老外的东西，你们表喷我）。

这样float最基本的功能就出来了，就是使文字浮动在它的周围，还要说明的一点就是，f如果把一个元素设置成float的时候，这个元素就会脱离文档流，类似于absolute属性，浮动的意思也就是莫过于此了，当一个div中所有元素都是浮动的时候那么这个父元素就不会被“撑开”（前提是父元素是自适应的高度，即没有设定高度）。这时候就要清浮动。下面通过一个demo说一下float属性：

<style type="text/css">.div1{background:#fff;}.div2{background:#ff4231;float:left;height:60px;width:40px;}</style><body><div class="div1"><div class="div2"></div><div style="background:#00FFFF;">来看看效果ba</div><div style="background:#FFFF00;">来看看效果ba</div></div><span style="white-space:pre"></span>

下面是效果图：

简要说明一下：黑色的框框就是文本的框框是不是浮动在float属性的周围了，其实绿色的框框是有两个div元素存在的不过是被浮动元素所覆盖了。但是它并没有覆盖文字这也正是它的效果。

如果一个自适应的div里面存在浮动元素，那么此时可能出现父div框不能包裹浮动的div，那么这个时候就要清除浮动，清除浮动主要有三个方法：

1.调整父div的高度使父div的高度可以包裹浮动元素，但是需要事先知道高度（不推荐）

2.通过overflow元素来实现，设置overflow元素为hidden和auto均可，auto元素会产生进度条，通过overflow使div内的元素事先紧靠（我也不知道这样解释对不对，欢迎更正）

3.通过clear元素进行清除浮动，这个方法分成两种，其实也是一种

（1）通过在父元素的最后一个子元素后面添加<div style="clear:both"></div>来实现清除浮动元素,有个问题也纠结了很久，clear属性是保证它的两边都不能出现浮动的元素，但是为什么这样就能使它上边的元素清除浮动呢？我的理解是浮动元素虽然是浮动的，但是它们毕竟在父div里面，那么也就是说它们也是在cleardiv的上面的，清除的时候就会清除它们的浮动，可以把clear div放在它们中间，那么只清除上面的下面的不会清除（很希望有大神能指导指导这里）。

（2）通过after伪元素来实现其实和（1）是一样的，定义一个style给父类就可以了：

.clearfix:after{clear:both;content:".";display:block;margin:0;padding:0;font-size:0;height:0px;line-height:0;background:#000;overflow:hidden;}

这样就能清除浮动了，保证了父div能被撑开了，下面是测试代码：

<style type="text/css">.div1{background:#0066FF;}.div2{background:#ff4231;float:left;height:60px;width:40px;}.div3{background:#ddff43;width:100px;height:60px;float:right;}.clearfix:after{clear:both;content:".";display:block;margin:0;padding:0;font-size:0;height:0px;line-height:0;background:#000;overflow:hidden;}</style><body><div class="div1 clearfix"><div class="div2"></div><div class="div3"></div>

这是效果图。

这就是我对float的理解，有什么不对的地方还请指出，让我们可以一起讨论讨论。

0 0