导读
float即浮动, 使用float, 该浮动元素便会脱离正常的文档流, 使其浮动到父元素的行的一端(元素向左或向右移动, 直到碰到浮动元素, 或者达到父元素内容的边界, 不包括padding), 并且其他元素将忽略该浮动元素并填补其原先的空间.
这里需要捋清一个概念, 所谓文档流是什么?
文档流: 元素按照自上到下, 自左到右的顺序依次排放, 即文档流.
float特别适合这种图文混排, 文字环绕图片的效果, 布局上灵活多变. 但不太适合动画, 因其可能造成reflow性能问题, 此时宜用绝对定位(position:absolute)或者固定定位(position:fixed).
float对布局的影响
对行框的影响
浮动元素旁边的行框被缩短, 从而给浮动框留出空间, 行框围绕浮动框.
因此, 创建浮动框可以使文本围绕图像, 如下:
float01.gif
float02.gif
对父元素的影响
元素浮动后, 会脱离正常文档流, 原文档中, 该浮动元素似乎消失了, 因此它不能撑开父元素, 容易造成父元素的塌陷.
对兄弟元素的影响
若兄弟元素是 块级元素.
现代浏览器及IE8+下, 该兄弟元素会忽视浮动元素而占据它的位置, 并且该兄弟元素会处于浮动元素的下层(并且无法通过z-index属性改变他们的层叠关系), 然而它的内容文字和其他行内元将会环绕浮动元素.
对此, IE6,7分别有不同的表现. IE6,7中, 该兄弟元素会紧跟在浮动元素的右侧, 并且IE6中会保留3px的空隙; IE7中则没有空隙.
若兄弟元素是 内联元素
则内联元素将环绕浮动元素排列.
对兄弟元素(浮动)的影响
若兄弟元素是 同一方向浮动.
则兄弟元素相对该浮动元素按照从左到右(float:left)或者从右到左(float:right)的顺序依次排列.
若兄弟元素是 反方向浮动.
则兄弟元素和浮动元素将组成两个向左或向右的浮动队列, 分别相对浮动方向同时向行中间浮动. 他们尽可能处于同一行, 如果行的宽度不足以容纳这两个队列, 两个队列将错开成两行, DOM结构中处于之前的浮动队列将优先排在上面一行, 另一个浮动队列将排在下一行或者部分排在下一行.
对自身元素的影响
浮动元素默认被视作块级对象(block-level).
对子元素的影响
浮动元素, 其高度或宽度取浮动子元素和非浮动子元素高度或宽度的最大值.
对父元素非浮动兄弟元素的影响
父元素之外的非浮动元素将会无视该浮动元素, 他们只会相对父元素按照正常文档流去排列.
对父元素浮动兄弟元素的影响
父元素之外的浮动兄弟元素, 会本能的找到该浮动元素, 现象参照 “对兄弟元素(浮动)的影响”.
清除浮动的2种方法
如上, float会带来父元素的塌陷, 下面提供两种解决方案, 以弥补float的缺陷.
如下DOM, 由于子元素设置为float:left, 此时父元素并不会被撑大, 高度为0, 背景将无法展示.
<style>
.outer{
background:#ccc;
}
.inner{
float:left;
width:150px;
height:100px;
margin:10px;
border:1px solid red;
}
</style>
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
IE6~7下可通过设置父元素的样式为zoom:1来清除浮动, 其他浏览器请参考如下两种方法清除浮动.
overflow
父元素使用overflow:auto|hidden, 切记不可使用overflow:visible.
.outer{
overflow:auto|hidden;
}
after伪类
利用clear:both属性, 同时为避免加入dom元素, 使用after伪元素设置如下属性即可:
.outer::after{
content:'';
display:block;
clear:both;
}
本文就讨论这么多内容,大家有什么问题或好的想法欢迎在下方参与留言和评论.
本文作者: louis
本文链接: http://louiszhai.github.io/2016/03/12/css-float/
参考文章
