CSS学习笔记7——浮动&&清除浮动代码

CSS浮动

CSS三种传统布局方式：

1. 普通流（标准流）

标签按默认方式排列

1. 浮动
2. 定位

多个块级元素纵向排列用标准流，横向排列用浮动

---

浮动（float）

选择器 {float:属性值；}

属性值	描述
none	元素不浮动（默认）
left	向左浮动
right	向右浮动

浮动特性 ！！

脱标

浮动元素会脱离标准流

1. 脱离标准流（浮）移动到指定位置（动）
2. 浮动的盒子不再保留原先的位置

具有行内块元素特性

• 块级盒子默认和父级元素一样宽，添加浮动后根据内容决定
• 浮动盒子中间无缝隙

浮动元素经常和标准流父级搭配使用

先用标准流父级排列上下位置，之后内部子元素浮动（e.g.居中显示）

浮动的盒子只影响盒子后面的标准流

---

---

清除浮动

父级根据子盒子自动检测高度

选择器 {clear：属性值；}

属性值	描述
left	清除左侧浮动元素影响
right	清除右侧浮动元素影响
both	清除两侧浮动元素影响

方法

1. 额外标签法（隔墙法）W3C推荐的做法
2. 父级添加overflow属性
3. 父级添加after伪元素
4. 父级添加双伪元素

额外标签法

在浮动元素末尾添加一个空标签

新的标签必须是块级元素

<div style=" clear:both" > </div>

• 优点：通俗易懂
• 缺点：添加了许多无意义标签，结构化较差

父级添加overflow

父级盒子选择器 {
	overflow:hidden; //或auto 或scroll
}

• 优点：代码简洁
• 缺点：无法显示溢出部分

父级添加after伪属性

.clearfix:after {
	content:"";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

.clearfix {             //IE6、7专有
	*zoom:1;
}

• 优点：没有增加标签，结构简单
• 缺点：照顾低版本浏览器

双伪元素清除浮动

.clearfix:before,.clearfix:after {
	content:"";
	display:table;
}
.clearfix:after {
	clear:both;
}
.clearfix {
	*zoom:1;
}

• 优点：代码更简洁
• 缺点：照顾低版本浏览器