标签按照默认的方式排列,我们叫做标准流(也叫普通流、文档流)。
比如块状元素会独占一行,从上到下顺序排列,而行内元素会按照顺序从左到右排列,碰到父元素的边缘则自动换行。
标准流是最基本的布局方式。
但有很多的布局效果,仅仅用标准流是没有办法完成的,此时可以用浮动完成布局,因为 浮动可以改变元素标签默认的排列方式,
最典型的应用:可以让多个块级元素一行内排列显示。
div {
float: none; /*元素不浮动(默认值)*/
float: left; /*元素向左浮动*/
float: right; /*元素向右浮动*/
}
1、浮动特性
1.1 浮动元素会脱离标准流(脱标)
设置了浮动的元素,脱离了标准流的控制,不再保留原来的位置。
1.2 浮动的元素会一行内显示并且元素顶部对齐
如果多个盒子都设置了浮动,他们会按照属性值在一行内显示并且顶端对齐,即使各个盒子大小不一样。
如果父元素一行内装不下多个盒子,多出的盒子会另起一行对齐。
1.3 浮动的元素具有行内块元素的特性
任何元素都可以设置浮动,不管原来是块级元素、行内元素还是行内块元素。设置浮动后,元素可以获得行内块元素的特性。
- 如果
行内元素设置为浮动,不需要模式转换就可以给元素设置宽度和高度
。 - 如果
块级盒子
没有设置宽度,默认宽度和父级是一样的,在设置浮动后,其大小根据内容来决定
浮动的元素和行内块元素的区别:浮动的盒子是互相挨在一起的,没有缝隙。
2、浮动布局注意点
2.1 浮动和标准流的父盒子搭配
在布局过程中,我们先用标准流的父元素排列上下位置,之后内部子元素采用浮动排列左右位置。
子元素可以先设置尺寸,然后再排列位置。
2.2 一个元素浮动了,理论上其余的兄弟元素也要浮动
一个盒子设置为浮动后,会影响浮动盒子后面的标准流(因为浮动元素会脱标)。如果一个盒子中有多个盒子,如果其中的一个盒子浮动,那么其他兄弟元素也应该浮动。
3、清除浮动
由于父级盒子很多情况下,不方便给高度(比如一些购物网站的商品页,商品数量不是一定的,父盒子的高度也是不一定的),但子盒子浮动又不占有位置,最后的结果就是父级盒子高度为 0,会影响下面的标准盒子。
这个时候我们就需要 清除浮动
。清除浮动不是让元素不浮动,清楚浮动的 实质是清除浮动元素造成的影响。
如果父盒子本身有高度,就不需要清除浮动。清除浮动后,父级会根据浮动的子盒子自动检测高度。
父级有了高度,就不会影响后面的标准流了。
div {
clear: left; /*不允许左侧有浮动元素(清除左浮元素影响)*/
clear: right; /*不允许右侧有浮动元素(清除右浮元素影响)*/
clear: both; /*同时清除左右两侧浮动的影响(实际工作中,几乎只用这个)*/
}
清除浮动的策略是闭合浮动。只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子。
3.1 清除浮动 —— 额外标签法
额外标签法也称为隔墙法。
额外标签法会在浮动元素末尾添加一个空的标签【要求这个标签必须是块级元素】。例如
, 或者。
优点:通俗易懂,书写方便。
缺点:添加许多无意义的标签,结构化较差。
3.2 清除浮动 —— 父级添加 overflow
可以给父级添加 overflow
属性,将其设置为 hidden、auto 或 scroll。
优点:代码简洁
缺点: 无法显示溢出的部分。
3.3 清除浮动 —— :after 伪元素法
额外标签法的升级版,也是给父元素添加
.clearfix:after {
content: \'\';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* IE6、7 专有 */
.clearfix {
*zoom: 1;
}
优点:没有增加标签,结构简单
缺点:照顾低版本浏览器。
3.4 清除浮动 —— 双伪元素清除浮动
同样给父元素增加
.clearfix:before, .clearfix:after {
content: \'\';
display: table;
}
.clearfix:after {
clear: both;
}
/* IE6、7 专有 */
.clearfix {
*zoom: 1;
}
优点:没有增加标签,结构简单
缺点:照顾低版本浏览器。