zsyjx0115

float详解

2015-12-06
评论

float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

float设计初衷

实现文字环绕图片效果，对左侧图片加入float属性样式，从而文字在右侧环绕图片

float特性

包裹

收缩：长宽会根据内容进行收缩

BFC：块级格式化上下文，将内部元素与外部进行隔绝

破坏

浮动会让父元素高度塌陷，float浮动子元素无法撑开父元素，因为其脱离了文档流，其实也是为了实现文字环绕效果。position:absolute也有类似破坏性的效果。

清除浮动

方法1

在塌陷的父元素底部block元素（如div）插入clear:both

在父元素的底部用after伪元素插入clear:both,但是IE6/7不支持after伪元素

方法2

对父元素使用BFC layout声明。如

float:left/right
position:absolute/fixed
overflow:hidden/scroll(IE7+)
display:inline-block/table-cell
width,height,zoom:1(IE6/7),...

权衡后的策略：

//IE8+
.clear:after{
	content: "";
	display: block;
	height: 0;
	overflow: hidden;
	clear: both;
}
//IE6 IE7
.clear{
	*zoom: 1;
}

.clear应该应用在包含浮动子元素的父元素上。

float带来的影响

float浮动特性可以将元素block化。原本display:inline-block的元素，在加入float浮动后，其display方式变为了block

float浮动特性可以将元素之间的空格去掉。之所以会产生空格去掉的效果，是因为将空格字符当成文字，形成了环绕效果，将所有的空格 移动到float元素的右侧，紧随其后的元素与float元素之间有间隔。若元素之间未采用空格字符隔开而是使用换行空格方式隔开，如下：

<button></button>
<button></button>
<button></button>
<div></div>

此时若给<button>元素添加float浮动，则所有元素紧挨显示；由于换行符在元素的末尾将不会显示，故紧随其后的<div>元素与button显示行之间无间隔。

float负面影响

float布局方式，需要固定元素尺寸，然后堆砌在一起。更换容器后，容易发生错位；低版本IE会出现许多显示问题。建议不要滥用float浮动特性。

浮动与流体布局

左侧固定，右侧自适应布局

左侧width+float

右侧padding-left/margin-left,距离值为距离边缘的距离值（包含左侧浮动元素宽度）

左右两侧都自适应

左侧float:left

右侧display:table-cell(IE8+) *display:inline-block(IE7)

浮动与兼容性

IE6浮动有双倍边距的bug。

IE7：

  1. 含clear的浮动元素包裹不正确：元素内容较多，宽度理应撑满整个屏幕，却只包裹部分屏幕宽度 > 一个 <div> 左浮动，同时含有 clear: left ，这一段的文字内容很长，所以，按照我们通常的理解，这个 <div>占据的长度应该有整个 body 这么长。但是，在 Internet Explorer 7 下，事与愿违，仅占据了部分body的内容区域宽度。

  2. 浮动元素倒数两个元素垂直间距问题（超过三个浮动元素时会出现该问题）
  3. 浮动元素最后一个字符出现重复
  4. 浮动元素楼梯排列问题
  5. 浮动元素和文本不在同一行，如文字设置右浮动，IE7文字右浮动在左侧元素下一行。故一般采用左侧内容左浮动，来避免这个问题。
Tags