网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动
一、浮动的特性
1、浮动元素会脱离标准流
- 脱离标准流的控制(浮)移动到指定位置(动)。
- 浮动的盒子不再保留原来的位置。
2、浮动的元素会一行内显示并且元素顶部对齐
浮动的元素是互相贴靠在一起的(不会有缝隙),如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐。
3、浮动的元素会具有行内块元素的特性
任何元素都可以设置浮动,不管原来是什么模式的元素,添加浮动之后具有行内块元素相似的特性。
- 如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动后,大小根据内容决定。
- 浮动的盒子中间是没有缝隙的,是紧挨着一起的。
4、浮动的元素经常和标准流父级搭配使用
先用标准流的父级排列上下位置,内部元素采用浮动排列左右位置,符合网页布局第一准则
浮动的盒子只会影响盒子后面的标准流,不会影响盒子前面的标准流(一浮全浮)
二、清除浮动
1、语法
clear:属性值(left/right/both)
属性值 | 描述 |
---|---|
left | 不允许左侧有浮动(清除左侧浮动的影响) |
right | 不允许右侧有浮动(清除右侧浮动的影响) |
both | 同时清除左右两侧浮动的影响 |
2、清理浮动的方法
(1)额外标签法(隔墙法)
在浮动元素末尾添加一个空标签。(添加的空标签必须为块级元素)
<div style="">
<div style="float:left"> </div>
<div style="float:left"> </div>
<div style="clear:both"> </div>
</div>
(2)overflow(给父级添加)
<div style="overflow:hidden">
<div style="float:left"> </div>
<div style="float:left"> </div>
</div>
(3):after伪元素法(给父级添加)
.clearfix:after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
/* IE6、7专有 */
*zoom: 1;
}
(4)双伪元素清除浮动(给父级添加)
.clearfix:before,.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both
}
.clearfix:after{
*zoom: 1;
}
(5)清除浮动的方法及优缺点
清除浮动的方式 | 优点 | 缺点 |
---|---|---|
额外标签法(隔墙法) | 通俗易懂,书写方便 | 添加了许多无意义的标签,结构化较差 |
父级overflow:hidden; | 书写简单 | 溢出隐藏 |
父级:after伪元素 | 结构语义化正确 | 由于IE6-7不支持:after,兼容性问题 |
父级双伪元素 | 结构语义化正确 | 由于IE6-7不支持:after,兼容性问题 |