大多数官方的对float的定义和用法是这样写的:
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。
注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。
道理我都懂,可还是不会用啊(我笨)!!
参考了很多很多关于float的理解,终于理解了一点,参考了http://www.cnblogs.com/chaixiaozhi/p/8481778.html的说法,说说自己的理解;
首先,最基本的,被设置了float的元素会脱离文档流。
听着很简单,但是实际运用时会遇到很多奇怪的现象,比如:
HTML代码 | CSS代码 | 原效果 | 浮动后效果 |
<body> | .first{ | ![]() | |
上图看到一个很明显的浮动效果,第二个div出现在页面左上角,而第一个则浮动在浏览器页面之上,就像新建了一个图层;
但是这里有一个问题,为什么第二个div里面的文字没有被盖住呢?
不知道大家有没有接触过DOM树
初次接触“脱离文档流”的朋友可以这样理解:
body是父亲,下面的两个div是兄弟,本来兄弟两个关系很好,一个一个排好队被body包含,但是有一天,第一个div被设置了float,老天爷(浏览器)规定,任何float元素都不允许再呆在自己的家族中,于是第一个div被逐出家门,断绝和body父子关系,于是两者之间不再包含;同时第二个div由于和第一个div是兄弟,平辈嘛,也无视了浮动的第一个div,占据了它的位置,但是第二个div的儿子,也就是文字“第二个”(文本或者其他元素)是晚辈嘛,就得让着第一个div了,不能占据它的位置;
于是第二个div里面的文字没有被盖住了(๑>ڡ<)✿
1、浮动定位元素会被排除在文档流之外-脱离文档流(不占据页面空间),其余的元素要上前补位
2、浮动元素会停靠在父元素的左边或右边,或停靠在其他已浮动元素的边缘上(元素只能在当前所在行浮动)
3、浮动元素依然位于父元素之内
4、浮动元素处理的问题-解决多个块级元素在一行内显示的问题
注意
1、一行内,显示不下所有的已浮动元素时,最后一个将换行
2、元素一旦浮动起来之后,那么宽度将变成自适应(宽度由内容决定)
3、元素一旦浮动起来之后,那么就将变成块级元素,尤其对行内元素,影响最大
块级元素:允许修改尺寸
行内元素:不允许修改尺寸
4、文本,行内元素,行内块元素时采用环绕的方式来排列的,是不会被浮动元素压在底下的,会巧妙的避开浮动元素浮动 之后会有什么样的影响?
由于浮动元素会脱离文档流,所以导致不占据页面空间,所以会对父元素高度带来一定影响。如果一个元素中包含的元素全部是浮动元素,那么该元素高度将变成0(高度塌陷)